默认情况下，如何在 jQuery UI 滑块中不选择任何内容？

Question

我正在使用 jQuery 2.1 和 jQuery UI 1.11.1。我想在我的页面上设置一个滑块，我使用下面的 JS

$(function() {
    $(".slider")
    .slider({
        max: 12,
        change: function(event, ui) { 
            alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});

问题是，看起来最初选择了选项“0”，我希望在有人点击某处之前勾选图形不会出现在滑块上 -- http://jsfiddle.net/u72596ta/4/。如何设置我的滑块以便在有人点击之前不显示刻度线？

Answer 1

只需删除类

 $(function() {
        $(".slider")
        .slider({
            max: 12,
            change: function(event, ui) { 
                alert(ui.value); 
            }
        })
        .slider("pips", {
            rest: "label"
        });
      $('.ui-slider-pip-initial').removeClass('ui-slider-pip-selected');
        $('.ui-slider-pip-initial').removeClass('ui-slider-pip-initial');
    });

Answer 2

您可以通过以下方式隐藏滑块手柄：

.ui-slider-handle {
  display: none;
}

如果您将 $('.ui-slider-handle').show() 添加到您的更改方法中，它将在单击时出现。

jsFiddle example

Answer 3

在滑块创建后隐藏处理程序，然后在值更改后显示它。

$(function() {
    $(".slider")
    .slider({
        max: 12,
        value:'',
        create: function(event, ui) {
              $(".ui-slider-handle").hide();
        },
        change: function(event, ui) { 
            $(".ui-slider-handle").show().focus();
            //alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});

http://jsfiddle.net/u72596ta/7/

默认情况下，如何在 jQuery UI 滑块中不选择任何内容？

How do I make nothing selected in my jQuery UI slider by default?

jquery

default

jquery-ui

slider