Значения полей слайдера начальной загрузки

Question

Итак, в основном я пытался достичь того, что находится в этом jsfiddle: http://jsfiddle.net/FPCRb/ У вас есть ползунок для ряда значений и двух текстовых полей.

Вот мой HTML таблицы:

<table class="table borderless"> 
    <thead> 
     <tr> 
     <th>Rank</th> 
     <th>+/-</th> 
     <th>Searches</th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td><input type="radio" name="optradio" class="custom"> ALL</td> 
     <td><input type="radio" name="optradio2" class="custom2"> ALL</td> 
     <td><input id="slider" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td> 
     <td><button id="reset" type="button" class="btn btn-success">Reset</button></td> 
     </tr> 
     <tr> 
     <td><input type="checkbox" class="custom-selector"> Rank 1-10</td> 
     <td><input type="checkbox" class="custom-selector2"> Up</td> 

     <td><input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="From" data-index="0" value="10"> 
      <label class="col-xs-1" style="font-size: 22px">→</label> 
      <input type="text" class="form-control form-inline col-xs-1 sliderValue" style="width: 60px" placeholder="To" data-index="1" value="90"></td> 
     </tr> 

     <tr> 
     <td><input type="checkbox" class="custom-selector"> Rank 11-20</td> 
     <td><input type="checkbox" class="custom-selector2"> Down</td> 
     <td><button id="reset" type="button" class="btn btn-info">Set interval</button></td> 
     </tr> 
     <tr> 
     <td><input type="checkbox" class="custom-selector"> Rank 21-100</td> 
     <td><input type="checkbox" class="custom-selector2"> No movement</td> 
     </tr> 
     <tr> 
     <td><input type="checkbox" class="custom-selector"> Not in top 100</td> 
     </tr> 
    </tbody> 
    </table> 

Вот мой сценарий:

$(document).ready(function() { 
    $("#slider").slider({ 
     min: 0, 
     max: 1000, 
     step: 1, 
     range: true, 
     values: [10, 90], 
     tooltip: 'always', 
     slide: function(event, ui) { 
      for (var i = 0; i < ui.values.length; ++i) { 
       $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
      } 
     } 
    }); 

    $("input.sliderValue").change(function() { 
     var $this = $(this); 
     $("#slider").slider("values", $this.data("index"), $this.val()); 
    }); 
}); 

Мне нужно, чтобы иметь возможность указывать как в текстовых полях значение и используйте ползунки, наряду со сбросом кнопка.

Похоже, я хотел его, но перемещение ползунка не меняет текстовые поля, и наоборот, что мне не хватает?

Answer 1

В интерфейсе JSFiddle элемент с идентификатором «слайдер» представляет собой пустой div, который jQueryUI правильно заполняет пользовательской разметкой слайдера. Но в вашем коде элемент является входом. Замените его пустой DIV, как показано в документации:

https://jqueryui.com/slider/

Answer 2

Я стараюсь код, но эта часть не работает (я работаю на Firefox), когда я ставлю предупреждение:

slide: function(event, ui) { alert(); // this alert is not show up!! 
      for (var i = 0; i < ui.values.length; ++i) { 
       $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 
      } 
     } 

Поэтому я меняю его. Попробуй это. Он работает для меня:

$("#slider").slider({ 
    min: 0, 
    max: 100, 
    step: 1, 
    range: true, 
    values: [10, 90], 
}); 

$('#slider').on('slide', function (ev) { 
    console.log(this.value[0]); 
    console.log(this.value[1]); 
    $('.sliderValue[data-index="0"]').val(this.value[0]); 
    $('.sliderValue[data-index="1"]').val(this.value[1]); 

});