gpt4 book ai didi

nouislider - 如何使用 noUISlider 加载多个带有值和工具提示的 slider ?

转载 作者:行者123 更新时间:2023-12-01 11:29:50 26 4
gpt4 key购买 nike

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

这是一个 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];
});

最佳答案

您可以将您的 slider 创建包装在一个函数中,并为您想要创建 slider 的所有元素调用它。

noUiSlider 还支持 tooltips(从 8.1.0 版本开始)和 connect 选项,因此如果您不想制作,则不必自己实现这些非常具体的变化。

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

以下代码使用 .slider 类初始化所有元素上的 slider 。

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 - 如何使用 noUISlider 加载多个带有值和工具提示的 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33418808/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com