Search code examples
javascriptjqueryrangeslider

Clone and initialise jQuery range slider not working


I am trying to clone and initialize jQuery range slider but It's not working.

<table id="repeatable-fieldset-one" width="100%">
                <thead>
                    <tr>
                        <th width="2%"></th>
                        <th width="30%">Name</th>
                        <th width="60%">Percentage</th>
                        <th width="2%"></th>
                    </tr>
                </thead>
                <tbody>
<tr>
                    <td><a class="button remove-row" href="#">-</a></td>
                    <td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="range" min="10" max="100" value="20" name="progress_value[]" data-rangeSlider>  <output></output></td>

<tr class="empty-row screen-reader-text">
<td><a class="button remove-row" href="#">-</a></td>
                    <td><input type="text" class="widefat" name="name[]" /></td>
                    <td><input type="range" min="10"  max="100" value="30" name="progress_value[]"  data-rangeSlider>  <output></output></td>
                </tr>
                </tbody>
                </table>

                <p><a id="add-row" class="button" href="#">Add another</a>
<script type="text/javascript">
   jQuery(document).ready(function($) {

   var $document = $(document);
        var selector = '[data-rangeslider]';
        var $element = $(selector);
        // For ie8 support
        var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
        // Example functionality to demonstrate a value feedback
        function valueOutput(element) {
            var value = element.value;
            var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
            output[textContent] = value;
        }
        $document.on('input', 'input[type="range"], ' + selector, function(e) {
            valueOutput(e.target);
        });

   // Basic rangeslider initialization
        $element.rangeslider({
            // Deactivate the feature detection
            polyfill: false,
            // Callback function
            onInit: function() {
                valueOutput(this.$element[0]);
            },
            // Callback function
            onSlide: function(position, value) {
                console.log('onSlide');
                console.log('position: ' + position, 'value: ' + value);
            },
            // Callback function
            onSlideEnd: function(position, value) {
                console.log('onSlideEnd');
                console.log('position: ' + position, 'value: ' + value);
            }
        });


    jQuery('#add-row').on('click', function() {
                    var row = $('.empty-row.screen-reader-text').clone(true);
                    row.removeClass('empty-row screen-reader-text');
                    row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
                    return false;
                });
                jQuery('.remove-row').on('click', function() {
                    jQuery(this).parents('tr').remove();
                    return false;
                });
                jQuery('#repeatable-fieldset-one tbody').sortable({
                    opacity: 0.6,
                    revert: true,
                    cursor: 'move',
                    handle: '.sort'
                });
                //$('input[type="range"]').rangeslider();
                // Basic rangeSlider initialization
                jQuery('input[type="range"]').rangeslider({
                    polyfill : false,
                    onInit : function() {
                        this.output = $( '<div class="range-output" />' ).insertAfter( this.$range ).html( this.$element.val() );
                    },
                    onSlide : function( position, value ) {
                        this.output.html( value );
                    }
                });
            });
    </script>

I have set up a demo on codepen. https://codepen.io/rigalpatel/pen/GRgrLZR

When I clone range slider it clone with value but its disable(cna't change progress in clone range slider).

Anyone, please help to fix this issue?

Thanks


Solution

  • Finally, I found the solution.

       jQuery(document).ready(function($) {
      var $document = $(document);
      var selector = "[data-rangeslider]";
      var $element = $(selector);
      // For ie8 support
      var textContent = "textContent" in document ? "textContent" : "innerText";
      // Example functionality to demonstrate a value feedback
      function valueOutput(element) {
        var value = element.value;
        var output =
          element.parentNode.getElementsByTagName("output")[0] ||
          element.parentNode.parentNode.getElementsByTagName("output")[0];
        output[textContent] = value;
      }
      $document.on("input", 'input[type="range"], ' + selector, function(e) {
        valueOutput(e.target);
      });
    
      // Basic rangeslider initialization
      $element.rangeslider({
        // Deactivate the feature detection
        polyfill: false,
        // Callback function
        onInit: function() {
          valueOutput(this.$element[0]);
        },
        // Callback function
        onSlide: function(position, value) {
          console.log("onSlide");
          console.log("position: " + position, "value: " + value);
        },
        // Callback function
        onSlideEnd: function(position, value) {
          console.log("onSlideEnd");
          console.log("position: " + position, "value: " + value);
        }
      });
    
      jQuery("#add-row").on("click", function() {
        jQuery("#repeatable-fieldset-one    tbody").append(
          '<tr><td><a class = "button remove-row" href="#"> - </a></td><td> <input type = "text" class= "widefat" name = "name[]" /> </td><td> <input type = "range" min = "10" max = "100" name = "progress_value[]" data-rangeSlider><output></output></td></tr>'
        );
        jQuery('input[type="range"]').rangeslider({
          polyfill: false,
          onInit: function() {
            this.output = $("<output />")
              .insertAfter(this.$range)
              .html(this.$element.val());
          },
          onSlide: function(position, value) {
            this.output.html(value);
          }
        });
        jQuery(".remove-row").on("click", function() {
          jQuery(this)
            .parents("tr")
            .remove();
          return false;
        });
      });
    
      jQuery("#repeatable-fieldset-one tbody").sortable({
        opacity: 0.6,
        revert: true,
        cursor: "move",
        handle: ".sort"
      });
    });