Toggle is not working

Please have a look on the below code. Toggle is not working here.

    <div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">Toggle</div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list simple-list">
          <label class="toggle toggle-init" id="toggle_slide">
            <input type="checkbox">
            <span class="toggle-icon"></span>


    return {
        on: {
            pageInit: function(page) {
                var toggle = this.$app.toggle.create({
                    el: '#toggle_slide',
                    on: {
                        change: function() {
                            console.log('not working');

                // Below line is also not working;
                console.log('>> ', toggle.checked);

Can you please tell whether I wrote correct or wrong?

According to your code you tries to init toggle twice, once with toggle-init class, another one with app.toggle.create, use something one

I removed inline class “toggle-init” still it is not working.

And do you see any errors in console? It is better to illustrate the issue with JSFiddle so i can take a look