Add tick marks to jQuery slider?

Question

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!

score 17 · Answer 1 · edited Mar 17 '13 at 06:41

17

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

edited Mar 17 '13 at 06:41

TheTedinator

745
1
8
16

answered Dec 06 '12 at 16:21

Arie Livshin

865
1
12
26

.ui-slider-tick-mark { display: inline-block; width: 2px; background: #fcf8e3; height: 28px; position: absolute; top: 0px; } If you want the styles to appear at the bottom. This is a mod of your code. Thanks. – blackmambo Dec 04 '15 at 07:50

score 10 · Answer 2 · answered May 23 '13 at 02:25

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

you may want to change the loop to start from i=1. this makes ui look better in my opinion — harshit, Jul 31 '16 at 03:19

CodeToad · Answer 3 · 2012-11-29T12:47:15.180

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

score 3 · Accepted Answer · edited Feb 25 '18 at 13:50

3

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.

edited Feb 25 '18 at 13:50

frogatto

28,539
11
83
129

answered Feb 01 '12 at 17:55

MandoMando

5,215
4
28
35

2

@DonnyP: Mando was specifically calling your attention to Mortimer's Answer, not Bijan's – silvamerica Mar 25 '12 at 23:48

score 0 · Answer 5 · answered Dec 27 '11 at 20:28

0

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

answered Dec 27 '11 at 20:28

Niet the Dark Absol

320,036
81
464
592

The range of the slider is dynamic, so using a background image won't work. Thanks though. I suspect there are CSS solutions – Don P Dec 27 '11 at 20:40

Add tick marks to jQuery slider?

5 Answers5

Linked