爲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); 
    } 
}