在jQuery滑块上添加刻度线？

Question

如何在jQuery滑块上添加刻度线？假设我有1到10的值,我怎么能在每个值上添加勾号？

我在SO上看过类似的帖子,但他们都建议使用插件,我想通过与其他元素进行大量交互来对其进行硬编码.

谢谢!

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

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

Answer 3

类似于这个SO问题。莫蒂默的回答可能会有所帮助。

尽管还没有正式的方法来做到这一点，但如果将其嵌入 jQuery UI 滑块中那就太好了。