javascript - 显示 ui slider 的指标和里程碑标签

Question

使用 HTML 和 JavaScript

我创建了一个滑动条，它可以通过选择选项成功地响应两种方式。但是我选择“隐藏”选择选项框。我想知道是否有人可以给我任何关于为 slider 创建标签的提示，因为用户现在不知道他们在选择什么。我发现的示例在悬停时显示完美的指标、里程碑数字和 float 数字，但所有内容都与滑动条相关，而不是标签。帮助!

我的 JavaScript slider 条码

        $(function() {
            var select = $( "#logbytes");
            var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });

            $('#logbytes').after(slider).hide();
        });

Answer 1

基本思想是将 slider 包裹在包装器 div 中。然后在包装器内添加另一个 div。其文本将是 slider 的当前值。

然后唯一剩下要做的就是移动那个 div 并更新它的文本。它是这样的:

slide: function(event, ui) {
    $( ".amount" ).text( ui.value );
    $( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}

其中 min 和 max 是 slider 的最小值和最大值。

参见 http://jsfiddle.net/WYdLF/举个例子。