jQuery Slider w/ Tick Marks

HTML

<div id="slider">

CSS

#slider .tick { z-index: 2; position: absolute; height: 100%; font-size: 1.8em; line-height: 1.8em; background: none; border-top: none; border-right: none; border-bottom: none; text-align: center; }

JavaScript

$(function() {
       
        var ticks = ['20s', '30s', '40s', '50s', '60s', '70s', '80s', '90s', '00s'];

        var slider = $("#slider").slider({
            min: 0,
            max: ticks.length,
            range: true,
            values: [4, 7],
            start: function(event, ui) {
                event.originalEvent.type == "mousedown" && $(this).addClass("ui-slider-mousesliding");
            },
        });
                

        $(ticks).each(function(i) {
            var tick = $('<div class="tick ui-widget-content">' + this + '</div>').appendTo(slider);
            tick.css({
                left: (100 / ticks.length * i) + '%',
                width: (100 / ticks.length) + '%'
            });
        })

        slider.find(".tick:first").css("border-left", "none");        
    });