Add tick marks to jQuery slider? [duplicate]

问题

How do I add tick marks to the jQuery slider? Say I have values from 1 to 10, how I can I add a tick at each value?

I've seen similar posts on S.O. but they all suggest plug-ins, and I would like to hard code it due to a lot of interactivity with other elements.

Thanks!

回答1:

Similar to this SO Question. The answer from Mortimer might help.

Although there is no official way of doing it yet, it'd be nice to have it baked in the jQuery UI slider.

回答2:

Thanks Code-Toad. I modified your code to work with percents instead of pixels, so now it's immune to window-resize:

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

回答3:

Thanks Arie Livshin and CodeToad. The previous code assume that the min value is always 1. I edited the code to work with min values too.

$("#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); 
     }
}

回答4:

here is a simple solution assuming that slider interval = 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;
}

回答5:

You could use a background image that has the marks in the right places - this would probably be the simplest way.

来源：https://stackoverflow.com/questions/8648963/add-tick-marks-to-jquery-slider

标签

jquery

css

jquery-ui

slider