Question

这是JSFiddle链接：（http://jsfiddle.net/jforman07/qaU7K/222/）。

问题：滑块不移动

这是JavaScript：

$(document).ready(function () {
 $("#slider").slider({
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {

         $("input.sliderValue[data-index=0]").val("$" + ui.values[0] + "k");

        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
        };
        setTimeout(delay, 0);
     }
 });


});

如果我改变

value: 50,

到

values: [50],

然后滑块工作，但滑块上的绿色阴影消失了 - 如JSFiddle所示 - http://jsfiddle.net/jforman07/qaU7K/223/

Answer 1

只需在代码中更改一行

即可

这

       $("input.sliderValue[data-index=0]").val("$" + ui.values[0] + "k");

要

       $("input.sliderValue[data-index=0]").val("$" + ui.value + "k");

Updated Fiddle

Answer 2

这似乎有效：

$(document).ready(function () {
$("#slider").slider(options = {
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {


        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
             $(".sliderValue").val("$" + ui.value + "k");
        };

        setTimeout(delay, 0);


    },
    create : function (event, ui){
     $(".sliderValue").val("$" + options.value+ "k");

    }
});


});

答：滑块完成后，使用create选项作为回调函数。用户界面是空的，因此我们必须为我们的选项命名，您可以在参考号(options = {...})中看到，这样我们就可以通过调用options.value来获取预设值 B：你应该在延迟功能中更新滑块标签。

JQuery UI Slider不能与“value：x”一起使用，只能使用“values：[x]”

2 个答案: