我希望我的jQueryUI范围滑块根据输入值动态移动

Question

here is the range slider

基本上，当我更改输入中的数字时，我希望滑块移动。

HTML代码：

<input id="txtMinPrice" type="text" placeholder="de la">
<input id="txtMaxPrice" type="text" placeholder="pana la">
<div id="price__range"></div>

jQuery代码：

`var sliderElement = $('#price__range');
$("#price__range").slider({
  range: true,
  min: 0,
  max: 100,
  values: [ 35, 100 ],
  slide: function(event, ui) {
    $('#txtMinPrice').val(ui.values[0]);
    $('#txtMaxPrice').val(ui.values[1]);
  }
});
$('#txtMinPrice').val(sliderElement.slider('values', 0));
$('#txtMaxPrice').val(sliderElement.slider('values', 1));`

Answer 1

$('#txtMinPrice, #txtMaxPrice').on({
    'input change': function(){
         $("#price__range").slider("option", "min", $('#txtMinPrice').val());
         $("#price__range").slider("option", "max", $('#txtMaxPrice').val());
         $('#price__range').slider( "option", "value", $('#price__range').slider("value"));
    }
})

基本上，您在输入上监听input或change事件，可以根据需要对其进行修改，然后继续替换滑块的最小值和最大值。来自docs。