呈现 ui 滑块的指标和里程碑标签

Question

使用 HTML 和JavaScript

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

我的 JavaScript 滑块条码

        $(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

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

然后剩下唯一要做的就是移动该 div 并更新它的文本。它类似于：

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

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

有关示例，请参阅 http://jsfiddle.net/WYdLF/。