如何使用 noUISlider 加载多个带有值和工具提示的滑块？

Question

我正在尝试使用 noUISlider 加载多个滑块，但它不起作用。使用第一个滑块时，第二个和第三个滑块的值会发生变化。我该如何重构一个滑块的代码，以便我可以轻松添加具有不同选项的其他滑块？

这是一个 fiddle 下面是我的代码。

// noUISlider
        var actSlider = document.getElementById('act-slider');

        noUiSlider.create(actSlider, {
            start: [0, 50],
            connect: false,
            step: 1,
            range: {
                'min': 0,
                'max': 50
            },
            format: {
                to: function (value) {
                    return value + '';
                },
                from: function (value) {
                    return value.replace('', '');
                }
            }
        });

        // Connect bar
        var connectBar = document.createElement('div'),
            connectBase = actSlider.getElementsByClassName('noUi-base')[0],
            connectHandles = actSlider.getElementsByClassName('noUi-origin');

        // Give the bar a class for styling and add it to the slider.
        connectBar.className += 'connect';
        connectBase.appendChild(connectBar);

        actSlider.noUiSlider.on('update', function (values, handle) {

            // Pick left for the first handle, right for the second.
            var side = handle ? 'right' : 'left',
            // Get the handle position and trim the '%' sign.
                offset = (connectHandles[handle].style.left).slice(0, -1);

            // Right offset is 100% - left offset
            if (handle === 1) {
                offset = 100 - offset;
            }

            connectBar.style[side] = offset + '%';
        });

        // Value tooltips
        var tipHandles = actSlider.getElementsByClassName('noUi-handle'),
            tooltips = [];

        // Add divs to the slider handles.
        for (var i = 0; i < tipHandles.length; i++) {
            tooltips[i] = document.createElement('div');
            tooltips[i].className += 'value-tooltip';
            tipHandles[i].appendChild(tooltips[i]);
        }

        // When the slider changes, write the value to the tooltips.
        actSlider.noUiSlider.on('update', function (values, handle) {
            tooltips[handle].innerHTML = values[handle];
        });

Answer 1

您可以将您的滑块创建包装在一个函数中，然后为您想要创建滑块的所有元素调用它。

noUiSlider 还支持 tooltips（从 8.1.0 版开始）和 connect 选项，因此如果您不想进行非常具体的更改，则不必自己实施这些选项。

对于每个滑块的不同选项，有几种方法可以做到这一点。我为 step 选项添加了一个使用数据属性的示例。

以下代码在所有具有 .slider class 的元素上初始化滑块。

function data ( element, key ) {
    return element.getAttribute('data-' + key);   
}

function createSlider ( slider ) {

        noUiSlider.create(slider, {
            start: [0, 50],
            connect: false,
            step: Number(data(slider, 'step')) || 1,
            range: {
                'min': 0,
                'max': 50
            },
            tooltips: true,
            connect: true,
            format: {
                to: function (value) {
                    return value + '';
                },
                from: function (value) {
                    return value.replace('', '');
                }
            }
        });
}

Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider);

这里有一个 jsFiddle 演示此代码。

如何使用 noUISlider 加载多个带有值和工具提示的滑块？

How to load multiple sliders with values and tooltips with noUISlider?

nouislider