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:
- <table>
- <tr>
- <td>
- <div class="divSlider">
- <div style="margin:0px" id ="bonusScore" Style="width:100px;">
- <div id="custom-handle" class="ui-slider-handle"></div>
- </div>
- </div>
- </td>
- <td>
- <input type="text" name="assesmentScore" class="input-mini" />
- </td>
- </tr>
- </table>
SCRIPT:
- $(function(){
- $(".divSlider").each(function(index,value ) {
- var handle = $("#custom-handle",$(this));
- var myslider =$("#bonusScore", $(this)).slider({// $this is a reference to .slider in current iteration of each
- orientation:"horizantal",
- range: "min",
- value:50,
- step: 10,
- min:10,
- max:100,
- animate: "fast",// handle smoothly when the user clicks on the slider track
- create: function() {
- handle.html( $( this ).slider('value'));
- $(this).find('.ui-slider-handle').html($( this ).slider('value'));
- } ,
- slide: function( event, ui ) {
- $(this).find(".ui-slider-handle").html(ui.value);
- $("#bonusScore").slider().find(".ui-slider-handle");
-
- $(this).parents("tr").find('input[name="assesmentScore"]').val(ui.value);
-
- }
- });
- //Change Slider wit I/p
- $(this).parents("tr").find('input[name="assesmentScore"]').change( function (event) {
- var textValue = $(this).parents("tr").find('input[name="assesmentScore"]').val();
- // above line I can get each input text box so I need to set slider handler value based on corresponding value
- myslider .slider('value',textValue); //now I can set slider value
- handle .text(textValue);//Now i can see handle value
-
- });
- });
- });