Jquery UI Multiple Slider Display Custom Handle value with Input Text Box (SOLVED)

Jquery UI Multiple Slider Display Custom Handle value with Input Text Box (SOLVED)

  • I have dynamic multiple input and dynamic slider handler so when on change input text value need to set slider value but I can't set slider handler check below code.
HTML:
  1. <table>
  2. <tr>
  3. <td>
  4. <div class="divSlider">
  5.              <div style="margin:0px" id ="bonusScore" Style="width:100px;">
  6.              <div id="custom-handle" class="ui-slider-handle"></div>  
  7. </div>
  8. </div>
  9. </td>
  10. <td>
  11. <input type="text"  name="assesmentScore"  class="input-mini" />
  12. </td>
  13. </tr>
  14. </table>
SCRIPT:
  1. $(function(){
  2.      $(".divSlider").each(function(index,value  ) {
  3.  var handle = $("#custom-handle",$(this));
  4. var myslider =$("#bonusScore", $(this)).slider({// $this is a reference to .slider in current iteration of each
  5.      orientation:"horizantal",
  6.      range: "min",
  7.      value:50,
  8.      step: 10,
  9.      min:10,
  10.      max:100,
  11.      animate: "fast",// handle smoothly when the user clicks on the slider track
  12.        create: function() {
  13. handle.html( $( this ).slider('value'));
  14. $(this).find('.ui-slider-handle').html($( this ).slider('value'));
  15. } , 
  16. slide: function( event, ui ) {
  17. $(this).find(".ui-slider-handle").html(ui.value);
  18. $("#bonusScore").slider().find(".ui-slider-handle");
  19.                                  
  20. $(this).parents("tr").find('input[name="assesmentScore"]').val(ui.value);
  21.  
  22. }  
  23.      });
  24. //Change Slider wit I/p
  25.     $(this).parents("tr").find('input[name="assesmentScore"]').change( function (event) {
  26.  var textValue = $(this).parents("tr").find('input[name="assesmentScore"]').val();
  27. // above line I can get each input text box so I need to set slider handler value based on corresponding value 
  28. myslider .slider('value',textValue); //now I can set slider value 
  29. handle .text(textValue);//Now i can see handle value
  30.  
  31. });
  32. });
  33. });