从一个滑块获取值并根据该值更改其他滑块 [英] get value from one slider and change other sliders based on the value

问题描述

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

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

这是代码链接

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

预先感谢

推荐答案

您需要查看插件的文档.

You need to review documentation of plugin for it.

当第一个滑块的值更改时，我需要更改其他滑块的值.在文档中，您将看到"change"事件作为一个函数.然后是一个称为"setValue"的方法，该方法处理更改滑块的值.因此，您需要在slider1上创建类似的内容.

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.

$("#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/

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

这篇关于从一个滑块获取值并根据该值更改其他滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！