Question

我有一个jquery-ui-slider脚本，它将带有特殊类的所有输入转换为滑块。

// Create Jquery-ui Slider
$(".create_slider").after('<div class="slider"></div>');
//
$(".slider").slider({
    value: $(this).siblings("input").val(),
    min: $(this).siblings("input").data("min"),
    max: $(this).siblings("input").data("max"),
    slide: function (event, ui) {
        $(this).siblings("input").val(ui.value);
    }
});

Html是：

<td>
    <input type="text" value="11" id="jpeg_compression" name="jpeg_compression" data-min="0" data-max="100" class="regular-text create_slider" readonly="">
    <div class="slider"></div>
    <p class="description"></p>
</td>

但是，value-min-max根本不起作用。 $(this).siblings("input").data("min")不起作用！

我有点理解为什么它不起作用，但有什么解决方案？

我使用create：

修复了价值问题

                            //
                            //
                            // Create Jquery-ui Slider
                            $(".create_slider").after('<div class="slider"></div>');
                            //
                            $(".slider").slider({
                              min: $(this).siblings("input").data("min"),
                              max: $(this).siblings("input").data("max"),
                              slide: function(event, ui) {
                                $(this).siblings("input").val(ui.value);
                              },
                              create: function(event, ui){
                                $(this).slider('value',$(this).siblings("input").val());
                              }
                            });

Answer 1

min和max选项会使用数字，但您的data-属性会以字符串形式返回。

您必须使用parseInt()转换其值，例如：

$(".create_slider").after('<div class="slider"></div>');
var $siblings = $(this).siblings("input");
$(".slider").slider({
    value: $siblings.val(),
    min: parseInt($siblings.data("min"), 10),
    max: parseInt($siblings.data("max"), 10),
    slide: function(event, ui) {
        $siblings.val(ui.value);
    }
});

Answer 2

从您几乎正常工作的解决方案开始，您也可以将create函数用于其他参数。

您可以将min和max设为http://api.jqueryui.com/slider/#option-max

选项

代码：

// Create Jquery-ui Slider
$(".create_slider").after('<div class="slider"></div>');
//
$(".slider").slider({
    slide: function (event, ui) {
        $(this).siblings("input").val(ui.value);
    },
    create: function (event, ui) {
        $(this).slider("option", "min", $(this).siblings("input").data("min"));
        $(this).slider("option", "max",  $(this).siblings("input").data("max"));
        $(this).slider('value', $(this).siblings("input").val());
    }
});

演示：http://jsfiddle.net/IrvinDominin/HZqA7/

Jquery-ui-slider参数化最小值和最大值

2 个答案: