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!

Answer 1

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