jQuery分别更改滑块值

jQuery Change slider values respectively

本文关键字：jQuery      更新时间：2023-09-26

我创建了3个滑块，[slider 1，slider 2，slider 3]，它们单独工作很好。但我想让它们相互依赖，分别工作到主滑块。

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

主滑块是滑块1，其他滑块2和滑块3依赖于滑块1。如果滑块1的值增加（当我们滑动滑块时），那么滑块2和滑块3的值也应该增加。和我们降低值时一样。

第二点：如果我们将滑块1设置为100，然后滑块2和3也设置为值100（自动），则100是滑块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 );
      }
    });
  });

您不应该使用滑块中的min选项。当数值低于slider1 时，使用幻灯片上的return false事件

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

我对您的代码进行了一些更改。基本上，设置最小值不会总是改变滑块的位置，您只是在滑块全部向左时设置该值。在该示例中，滑块2根据当前滑块1的值设置其最小值。滑块3根据当前滑块1的值设置其最小显示值。

你可以稍微优化一下，但我认为这就是你想要实现的！

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

在此处检查

它有点乱。。。无论如何，我希望这能帮助你：

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

只是为了强调一个重要的点，我刚刚意识到它只接受这个命令上的整数值：

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

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

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

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

相关文章：