Alex Rivera | Logout

Add tick marks to jQuery slider?

Asked 2011-12-27T20:26:46.137
12

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!

Edit
Report

1 Answer

10

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); 
     }
}
answered 2013-05-23T02:25:09.553

Your Answer