jQuery Slider with Tick Marks

Adding tick marks to the jQuery slider widget.

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<div data-role="fieldcontain" id="slider">
     <label for="slider">Input slider:</label>
     <input type="range" name="slider" id="slider" value="0" min="0" max="10"  />
</div>

CSS

.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:black;
height:16px;
position:absolute;
top:-4px;
}

JavaScript

$(document).ready(function(){
    var mySlider =  $('#slider1');
    var max =  mySlider.slider("option", "max");
    //var spacing =  100 / (max -1);
    //mySlider.find('.ui-slider-tick-mark').remove();    
    for (var i = 0; i < 10 ; i++)
        $('<span class="ui-slider-tick-mark"></span>').css('left', (11 * i) + '%').appendTo(mySlider);
    
});