Question

我需要在创建滑块时设置滑块的值，我该怎么办？示例：

<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

对于使用.data()方法访问的数据属性，请不要使用camelCase：

ui.values[0] = $(this).data('min-value');
ui.values[1] = $(this).data('max-value');

仅使用camelCase when you're using the native .dataset object，即：

ui.values[0] = $(this)[0].dataset.minValue;
ui.values[1] = $(this)[0].dataset.maxValue;

Answer 2

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

您可以更改此设置

$('.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')
    });
});

从slider jquery ui中的element data-attribute设置自定义值

2 个答案: