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

sorry i am just beginner here, i would like like to get the value of the slider and dynamically change the other sliders based on that value for example : if the first slider value is: first_slider x then my second slider will be : second_slider = x + 20 and third slider will be : third_slider = x + 10

对不起,我只是初学者,我想得到滑块的值,并根据该值动态更改其他滑块,例如:如果第一个滑块值是:first_slider x那么我的第二个滑块将是:second_slider = x + 20和第三个滑块将是:third_slider = x + 10

here are the code 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>`

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

thanks in advance

提前致谢

2 个解决方案

#1

You need to review documentation of plugin for it.

您需要查看插件的文档。

I got you need to change values of other sliders when value of first slider changed. In documentation, you'll see the "change" event as a function. Then there's a method called "setValue" which deals with changing value of sliders. So, you need to create something like that on slider1.

当第一个滑块的值发生变化时,我需要更改其他滑块的值。在文档中,您将看到“更改”事件作为函数。然后有一个名为“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);
    }
});

Here's the edited version of your fiddle: https://jsfiddle.net/fe7j3ohv/28/

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

#2

If by value of the slider you mean a value of the text in the div then try this: first check first slider to see if you found your value, if so, over-write whatever is in the second slider with desired value.

如果滑块的值是指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);
}

#1