Предполагается, что у вас есть два <input>
элемента:
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
и элемент-заполнитель слайдера:
<div id="slider"></div>
Вы можете использовать опцию values
, чтобы поместить виджет слайдера врежим нескольких дескрипторов и синхронизация значений элементов <input>
с:
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
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());
});
Результаты можно увидеть в this fiddle .