基础滑块可以参考上一篇
eval(newThree).map((item, index) => {
<div id="${uniqueId}" data-value="${item.text}" class="slider2"></div>
$(document).ready(function () {
for (let i = 0; i < sliders.length; i++) {
let initialValue = 0.5
sliderId = sliders[i]
values = $('#' + sliderId).attr('data-value')
// console.log(name1, 'name1')
// console.log(value1, 'value1')
for (let j = 0; j < pairs1.length; j++) {
let valuePair = pairs1[j].split(':')
let key = valuePair[0]
let value = valuePair[1]
if (key === values) {
initialValue = value;
break
}
}
$('#' + sliderId).slider({
min: 0,
max: 1,
value: initialValue,
step: 0.01,
slide: function (event, ui) {
let sliderId = event.target.id;
let sliderValue = ui.value;
let dataValue = event.target.getAttribute('data-value');
console.log('滑动的滑块 ID：', sliderId);
console.log('滑块的当前值：', sliderValue);
console.log('滑块的 data-value 属性值：', dataValue);
}
})
}
})效果如下
