jQuery分别更改滑块值

我创建了3个滑块，[滑块1，滑块2，滑块3]，并且它们可以单独工作。但我想让他们互相依赖并分别对主滑块进行工作。jQuery分别更改滑块值

你可以看到我的演示在这里：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); 
     } 
    }); 
    });

来源

2013-11-23 Shivam Pandya

你不应该使用滑块min选项。

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

来源

2013-11-23 09:43:35 Wilq

啊哈，正是我想要的。谢谢你，朋友 –

我做了一些通道昂贵的代码。基本上，设置最小值不会alwas更改滑块的位置，你是正确的设置滑块全部离开时的值。在示例中，滑块2根据当前slider1的值将其设置为最小值。滑块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});

Check it here

来源

2013-11-23 09:39:53 nobe4

它的完成，我想要的是你可以看到接受的答案，但我感谢你的帮助。谢谢 –

这是一个有点乱......无论如何，我希望这能帮助你：

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

     } 
    }); 
    });

来源

2013-11-23 09:42:56

其完成，我想要的是你可以看到接受的答案，但我感谢你的帮助。谢谢 –

只是强调很重要的一点，我刚才已经意识到只接受整数值上：对当值将低于slider1

Example in jsfiddle

的完整代码幻灯片事件中使用return false这个命令：

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

所以，如果你需要改变其值ssing输入文本，则必须投这样说：

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

，所以你可以把使用变量IntValue高于该数值。

来源

2014-10-31 13:13:41

jQuery分别更改滑块值

回答

相关问题