Question

抱歉，我只是初学者，我想得到滑块的值，并根据该值动态更改其他滑块例如：如果第一个滑块值为：first_slider x 然后我的第二个滑块将是：second_slider = x + 20 第三个滑块为：third_slider = x + 10

这里是代码link

HTML

<h2>roundSlider</h2> 
<p>For more details check the website: <a href="http://roundsliderui.com/">http://roundsliderui.com/</a></p>

<div id="first_slider"></div>
<div id="second_slider"></div>`

JS

$("#first_slider").roundSlider({
    handleShape: "dot",
    width: 22,
    radius: 100,
    value: 15,
    circleShape: "half-top",
    sliderType: "min-range"
});

$("#second_slider").roundSlider({
    handleShape: "dot",
    width: 22,
    radius: 100,
    value: 15,
    circleShape: "half-top",
    sliderType: "min-range"
});
$("#third_slider").roundSlider({
    handleShape: "dot",
    width: 22,
    radius: 100,
    value: 15,
    circleShape: "half-top",
    sliderType: "min-range"
});

提前致谢

Answer 1

您需要查看插件文档。

当第一个滑块的值发生变化时，我需要更改其他滑块的值。在文档中，您将看到“更改”事件作为函数。然后有一个名为“setValue”的方法来处理滑块的变化值。所以，你需要在slider1上创建类似的东西。

$("#first_slider").roundSlider({
    handleShape: "dot",
    width: 22,
    radius: 100,
    value: 15,
    circleShape: "half-top",
    sliderType: "min-range",
    change: function(event) {
        var value = event.value;
        $('#second_slider').roundSlider('setValue', value + 20);
        $('#third_slider').roundSlider('setValue', value + 10);
    }
});

这是你小提琴的编辑版本： https://jsfiddle.net/fe7j3ohv/28/

Answer 2

如果按滑块的值表示div中文本的值，请尝试以下操作：首先检查第一个滑块以查看是否找到了您的值，如果是，则覆盖第二个滑块中具有所需值的任何内容

var first_slider = $(div#first_slider).text();
var second_slider = $(div#second_slider);
var search_for_value = 2;
var desired_value = 'replace with anything you want to display in second slider';

if (first_slider===search_for_value){
   second_slider.html(desired_value);
}

从一个滑块获取值并根据值更改其他滑块

2 个答案: