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

Posted 2021-03-31

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));`

答案

$('#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。