向 jQuery 滑块添加刻度线？ [复制]

Posted 2023-03-06

【中文标题】向 jQuery 滑块添加刻度线？ [复制]

【英文标题】：Add tick marks to jQuery slider? [duplicate]

【发布时间】：2012-01-28 18:08:39

【问题描述】：

如何向 jQuery 滑块添加刻度线？假设我的值从 1 到 10，我如何在每个值上添加一个刻度？

我在 S.O. 上看到过类似的帖子。但他们都建议使用插件，由于与其他元素有很多交互性，我想对其进行硬编码。

谢谢！

【参考方案1】：

感谢 Code-Toad。我修改了您的代码以使用百分比而不是像素，所以现在它不受窗口调整大小的影响：

javascript：

function setSliderTicks()
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  100 / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max ; i++) 
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     

CSS：

.ui-slider-tick-mark
    display:inline-block;
    width:2px;
    background:black;
    height:16px;
    position:absolute;
    top:-4px;

【讨论】：

.ui-slider-tick-mark display: inline-block;宽度：2px；背景：#fcf8e3；高度：28px；位置：绝对；顶部：0px；如果你想让样式出现在底部。这是您的代码的一个模式。谢谢。

【参考方案2】：

感谢 Arie Livshin 和 CodeToad。前面的代码假定最小值始终为 1。我编辑了代码以使用最小值。

$("#users-slider").slider(
  
    range: "min",
    value: 3,
    min: 3,
    max: 6,
    create: function( event, ui ) 
      setSliderTicks(event.target);
    ,
  
);

function setSliderTicks(el) 
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max-min ; i++) 
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     

【讨论】：

您可能希望将循环更改为从 i=1 开始。在我看来，这让 ui 看起来更好

使用i <= max-min 显示最后一个刻度线。

【参考方案3】：

这是一个假设滑块间隔 = 1 的简单解决方案。

function setSliderTicks()
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  $slider.width() / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
        for (var i = 0; i < max ; i++) 
            $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + 'px').appendTo($slider);                    
        



.ui-slider-tick-mark
display:inline-block;
width:2px;
background:black;
height:16px;
position:absolute;
top:-4px;

【参考方案4】：

Similar to this SO Question。 Mortimer 的回答可能会有所帮助。

虽然目前还没有官方的做法，但如果能在 jQuery UI 滑块中烘焙它会很不错。

【讨论】：

@DonnyP：Mando 是特别提醒你注意莫蒂默的回答，而不是比扬的

【参考方案5】：

您可以使用在正确位置有标记的背景图片 - 这可能是最简单的方法。

【讨论】：

滑块的范围是动态的，所以使用背景图片是行不通的。不过谢谢。我怀疑有 CSS 解决方案