javascript - jQuery 分别更改 slider 值

Question

我创建了 3 个 slider ，[ slider 1、 slider 2、 slider 3]，它们各自工作正常。但我想让它们相互依赖并分别作用于主 slider 。

你可以在这里看到我的演示:JSFIDDLE

主 slider 是 slider 1，其他 slider 2和 slider 3依赖于 slider 1。如果 slider 1 的值增加(当我们滑动 slider 时)，则 slider 2 和 slider 3 的值也应该增加。和我们降低值(value)时一样。

第二点:如果我们将 slider 1 设置为 100，然后将 slider 2 和 3 的值也设置为 100(自动)，则 100 是最小值。 slider 2 和 3 的值。简而言之， slider 1 的值是 slider 2 和 3 的最小值。

例如， slider 1 设置为 500，然后 slider 2 和 3 可以滑动以增加到 500 以上，但不能减少到 500 以下。

这是我的代码示例

<div id="slider1"></div><br>
<div id="slider2"></div><br>
<div id="slider3"></div><br>
Slider 1 : <div id="value1"></div><br>
Slider 2 : <div id="value2"></div><br>
Slider 3 : <div id="value3"></div><br>

jQuery

$(function() {
    $( "#slider1" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
         $( "#value1" ).text(ui.value);
         $( "#slider2" ).slider('option',{min: ui.value});  
        $( "#slider2" ).slider('value',ui.value);
        $( "#slider3" ).slider('option',{min: ui.value});
      }
    });
  });

$(function() {
    $( "#slider2" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
          $( "#value2" ).text(ui.value);
          $( "#value2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
        $( "#amount" ).val( "$" + ui.value );
      }
    });
  });

$(function() {
    $( "#slider3" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
          $( "#value3" ).text(ui.value);
          $( "#value3" ).val( "$" + $( "#slider3" ).slider( "value" ) );
        $( "#amount" ).val( "$" + ui.value );
      }
    });
  });

Answer 1

您不应该使用 slider 中的 min 选项。当值低于 slider1

时，在滑动事件上使用 return false

Example in jsfiddle

完整代码:

$(function() {
    $( "#slider1" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#value1" ).text(ui.value);
        $('#value2').text(ui.value); // slider 2 text
        $('#value3').text(ui.value); // slider 3 text
        $( "#slider2" ).slider('value',ui.value);
        $('#slider3').slider('value',ui.value);
        //$( "#slider2" ).slider('option',{min: ui.value});  remove this
        //$( "#slider3" ).slider('option',{min: ui.value});
      }
    });


    $( "#slider2" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
          if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1
              return false; // don't slide
          }
          $( "#value2" ).text(ui.value);
          $( "#value2" ).val( "$" + $( "#slider2" ).slider( "value" ) );
          $( "#amount" ).val( "$" + ui.value );

      }
    });

    $( "#slider3" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
          if(ui.value < $('#slider1').slider('value')){ // if the value is lower than slider 1
              return false; // don't slide
          }
          $( "#value3" ).text(ui.value);
          $( "#value3" ).val( "$" + $( "#slider3" ).slider( "value" ) );
          $( "#amount" ).val( "$" + ui.value );
      }
    });
});