javascript - 从 slider jquery ui 中的元素数据属性设置自定义值

Question

我需要在创建 slider 时设置 slider 的值，我该怎么做？示例:

<div class="slider" data-min-value="0"  data-max-value="120"><input type="range"></div>





$('.slider').slider({
            range: true,
            create: function(event, ui) {
                console.log($(this).data('minValue'));
                ui.values[0] = $(this).data('minValue');
                ui.values[1] = $(this).data('maxValue');
            },
})

但是 ui 是空的。

Answer 1

ui.values 数组只是一个参数，更改它不会更改 slider 的设置。

你这样修改设置

$('.slider').slider({
    range: true,
    create: function (event, ui) {
        $(this).slider( "option", "max", $(this).data('maxValue') );
        $(this).slider( "option", "min", $(this).data('minValue') );
    }
});

请注意，您通常只在实例化时执行此操作

$('.slider').each(function() {
    $(this).slider({
        max: $(this).data('maxValue'),
        min: $(this).data('minValue')
    });
});