noUiSlider：创建多个

Question

我在一个有几十个滑块的表单上使用 noUiSlider (http://refreshless.com/nouislider/)。我想我可以设置一个 class 名称数组和一个循环，而不是每个名称的 copy/pasting 代码。这样可行;即，它设置了工作滑块。但是，表单还必须在更新时显示滑块的值，这是我无法解决的部分。我知道如何用静态值来做，但不知道如何在循环中做...

简化示例：

JavaScript:

var steps = [
    'Never',
    'Occasionally',
    'Frequently',
    'Constant'
];
// This array will have many more
var slider_names = [
    'slider',
    'slider2'
];
var sliders = [];

for (var i = 0; i < slider_names.length; i++) {
    sliders.push(document.getElementById(slider_names[i]));
    noUiSlider.create(sliders[i], {
        start: 0,
        connect: 'lower',
        step: 1,
        range: {
            'min': [ 0 ],
            'max': [ 3 ]
        },
        pips: {
            mode: 'steps',
            density: 100
        }
    });
    sliders[i].noUiSlider.on('update', function(values, handle) {
// ***** Problem line *****
        document.getElementById(slider_names[i]+'-value').innerHTML = steps[parseInt(values[handle])];
// ***** Problem line *****
    });
}

HTML:

<div id="slider-value"></div>
<div id="slider"></div>
<div id="slider2-value"></div>
<div id="slider2"></div>  (etc...)

上面突出显示了问题行...当使用静态值（例如，'slider2-value'）时它工作正常，但我似乎无法弄清楚如何在更新时定位适当的 ID事件触发器... slider_names[i] 显然不会在那里工作。我可能遗漏了一些明显的东西？谢谢！

Answer 1

我今天也遇到了同样的问题，我使用了下面的代码。

基本上我只是将滑块的所有值发送到此函数，然后将所有结果推送到一个数组中，然后我可以处理我想要的数据数组。

希望这也能对您有所帮助。

var sliders = document.getElementsByClassName('sliders');

for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: 50,
        step: 5,
        connect: "lower",
        orientation: "horizontal",
        range: {
            'min': 0,
            'max': 100
        },
    });

    sliders[i].noUiSlider.on('slide', addValues);
}

function addValues(){
    var allValues = [];

    for (var i = 0; i < sliders.length; i++) {
        console.log(allValues.push(sliders[i].noUiSlider.get()));
    };

    console.log(allValues);
}

Answer 2

这是一个工作模型，允许您在同一页面上有多个 noUiSliders 和滑块值。

这是 3 个滑块的 html。您可以添加任意数量的内容。

    <div class="slider"></div>
    <div class="value">0</div>

    <div class="slider"></div>
    <div class="value">0</div>

    <div class="slider"></div>
    <div class="value">0</div>

这里是 javascript，它将创建滑块并在移动滑块时将正确的值添加到相应的滑块。

    $(function () {
    var sliders = document.getElementsByClassName('slider');
    var slideval = document.getElementsByClassName('value');

    for (var i = 0; i < sliders.length; i++) {
        noUiSlider.create(sliders[i], {
            start: 0,
            connect: [true, false],
            range: {
                'min': 0,
                '10%': 1,
                '20%': 2,
                '30%': 3,
                '40%': 4,
                '50%': 5,
                '60%': 6,
                '70%': 7,
                '80%': 8,
                '90%': 9,
                'max': 10
            },
            snap: true,
        });


        sliders[i].noUiSlider.on('slide', function () {
            var allValues = [];
            for (var i = 0; i < sliders.length; i++) {

                // store values in array to pass through ajax...
                allValues.push(sliders[i].noUiSlider.get());

                // assign the slider value to the corresponding noUiSlider
                slideval[i].innerHTML = sliders[i].noUiSlider.get();
            };
        });
    }
});

Answer 3

这个有效：

var sliders = document.getElementsByClassName('sliders');

for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: 10,
        step: 1,
        connect: "lower",
        orientation: "horizontal",
        range: {
            'min': 0,
            'max': 100
        },
    });

    sliders[i].noUiSlider.on('slide', addValues);
}

function addValues(){
    var allValues = [];

    for (var i = 0; i < sliders.length; i++) {
        allValues.push(sliders[i].noUiSlider.get());
    };
    
    for (var j = 0; j < allValues.length; j++) {
    document.getElementsByClassName('slider-value')[j].innerHTML = allValues[j];
    }

}

<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>

noUiSlider：创建多个

noUiSlider: Create multiple

javascript

nouislider