Add tick marks to jQuery slider? [duplicate]

Question

This question already has an answer here:

• How do I add a Marker to a jQuery UI Slider? 1 answer

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!

Answer 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.

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

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

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

Answer 5

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