noUiSlider:创建多个

Question

我在表单上使用noUiSlider (http://refreshless.com/nouislider/)，表单上将有几十个滑块。与其复制/粘贴每个代码，我还以为我可以设置一个类名数组和一个循环。那是有效的；它设置工作滑块。然而，表单还必须在更新时显示滑块的值，这是我无法计算的部分。我知道如何用静态值来做这件事，但在循环中不知道.

简化示例：

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...)

问题线在上面突出显示..。当使用静态值(例如，‘slder2-value’)时，它工作得很好，但当update事件触发时，我似乎找不出如何针对适当的id .slider_namesi显然不会在那里工作。我可能漏掉了什么明显的东西？谢谢!

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>

​