JQuery ui Slider is not working with duplicate

Question

We have using JQuery ui Slider but after clone it we had faced these matters

• New cloned slider not sliding !!

• When input value changed, All of sliders not sliding and background not changed !!

  You can see a live example here

  https://jsfiddle.net/earngate/ohfco7zn/1/

• HTML

  <!-- HTML Code -->
  <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  
  <div id="entry" class="markup scoreSlide">
  <input type="text" id="" class="scoreID" value="3" />
  <div class="scoreSlider"></div> <p />
  </div>
  <input type="button" id="btnAdd" value="add new slider">
  

• Javascript

          $(window).load(function(){
  
          jQuery(".scoreSlide").each(function(){
          jQuery(this).find('.scoreSlider').slider({
          animate: true,
          range: "min",
          value: jQuery('.scoreID').val(),
          min: 1,
          max: 10,
          step: 1,
          slide: function(event, ui) {
  
          $(this).parent().find('.scoreID').val(ui.value);
          }
          });
          });
  
  
          $('#btnAdd').click(function () {
          $(".scoreSlide:last").clone(true,true).insertBefore(this);
  
  
          });
  
          });//]]> 
  

Answer 1

You have to reuse the slide function when you click the button.

https://jsfiddle.net/ooxwtyog/

function sliding(){
jQuery(".scoreSlide").each(function(){
        jQuery(this).find('.scoreSlider').slider({
            animate: true,
            range: "min",
            value: jQuery('.scoreID').val(),
            min: 1,
            max: 10,
            step: 1,
            slide: function(event, ui) {

                $(this).parent().find('.scoreID').val(ui.value);
            }
        });
    });
}