显示 ui 滑块的指标和里程碑标签

Posted 2023-03-13

【中文标题】显示 ui 滑块的指标和里程碑标签

【英文标题】：Presenting indicators and milestone labels for ui slider bar

【发布时间】：2011-09-06 09:17:45

【问题描述】：

使用 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();
        );

【问题讨论】：

你到底是什么意思？类似于当前值高于 div 的标签？

是的，只是表明已选择的内容，因为在分钟内我只有滑块。或者像 0 1 2 3 4 这样的滑块下的类似时间线的条形

【参考方案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/。