Clone and initialise jQuery range slider not working

Question

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

Answer 1

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"
  });
});