Question

我创建了3个滑块，[Slider 1，Slider 2，Slider 3]，它们可以单独使用。但是我想让它们相互依赖并分别工作到主滑块。

您可以在此处查看我的演示：JSFIDDLE

主滑块是滑块1，其他滑块2和滑块3依赖于滑块1。如果滑块1的值增加（当我们滑动滑块时），则滑块2和滑块3的值也应该增加。和我们减少价值的时候一样。

第二点：如果我们将滑块1设置为100，然后将滑块2和3设置为值100（自动），则100为min。滑块2和3的值在滑块1的短值中是滑块2和3的最小值。

例如，滑块1设置为500，滑块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

我对您的代码进行了一些更改。基本上，设置最小值不会改变滑块位置，您可以在滑块全部保留时设置值。在示例中，滑块2根据当前slider1的值设置它的最小值。滑块3设置它的最小显示值取决于当前slider1的值。

你可以优化一点，但我认为这是你想要实现的目标！

//min value of slider 2 = current value of slider 1
$( "#slider2" ).slider('option',{min: ui.value});
//slider 3 cannot be under slider 1
if($( "#slider3" ).slider("value") < ui.value)
    $( "#slider3" ).slider('option',{value: ui.value});

Check it here

Answer 2

您不应使用滑块中的min选项。当值低于return false

时，在幻灯片事件上使用slider1

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

Answer 3

它有点凌乱......无论如何，我希望这可以帮助你：

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

      }
    });
  });

Answer 4

只是为了突出重点，我刚刚意识到它只接受此命令的整数值：

$( "#slider2" ).slider('value',IntValue);

因此，如果您需要通过传递输入文本来更改其值，则必须以这种方式进行转换：

parseInt($("#input_text_slider2").val())

因此您可以使用上面的变量IntValue来设置该值。

jQuery分别更改滑块值

4 个答案: