为jQuery滑块添加刻度线？

Question

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

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

谢谢！

Answer 1

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

虽然目前还没有官方的方式，但它可以很好地让它在jQuery UI滑块中烘焙。

Answer 2

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

Answer 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; 
} 

Answer 4

由于代码蟾蜍。我修改你的代码百分比而不是像素的工作，所以现在是免疫改变窗口大小：

的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; 
} 

Answer 5

感谢阿里Livshin和CodeToad。前面的代码假设min值始终为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); 
    } 
}