如何在发生外部事件时更新 jquery ui 滑块状态

Question

我有以下滑块配置：

$("#slider-range100").slider({
            range: true,
            min: 5,
            max: 90,
            values: [7, 35],
            slide: function (event, ui) {
                $("#1amount100").val(ui.values[0]);
                $("#2amount100").val(ui.values[1]);

            }
        });

现在输入 $("#1amount100") 和 $("#2amount100") 当我移动滑块时刷新。

我还想在更改输入值时刷新滑块状态。

jqueryui滑块可以吗？

Answer 1

您可以在输入上添加一个侦听器以触发滑块的变化。这是一个粗略的示例，但您可以执行以下操作：

 $slider = $("#slider-range100"); //cache your slider
 $( "#1amount100").change(function() {

      //when the first input changes, update the LEFT value of the slider only
      $slider.slider( "option", "values", 
      [ this.value, $slider.slider( "option", "values" )[1] ] );

  });

 $( "#2amount100").change(function() {

      //when the first input changes, update the RIGHT value of the slider only
      $slider.slider( "option", "values", 
      [ $slider.slider( "option", "values" )[0], this.value ] );

  });

（您显然需要更正它可能接收的输入类型。此外，您需要控制基于用户的输入更改与基于 jQuery 的输入更改，否则它可能会进入循环。我开始使用 isUserChange)

来指导您