year select slider

by ostapische

HTML

<div id="yearsHolder" style="height: 20px !important; overflow-x: hidden; position: relative;"></div>
<div id="slider" style="width: 200px;"></div>
<div id="amount"></div>

JavaScript

var yearTextWidth = 50;
var yearsPerText = 5;// every 5 years appears text
$(function() {
    $("#slider").slider({
        min: 1900,
        max: 2000,
        step: 1,
        disabled: false,
        animate: true,
        orientation: "horizontal",
        range: false,
        value: 1900,
        create: function(event, ui) {
            var slider = $(this);
            var value = slider.slider("value");
            $("#amount").html(value);
            var sliderWidth = slider.width();
            var yearTextsLength = Math.floor(sliderWidth / yearTextWidth);// left or equal
            var yearsHolder = $("#yearsHolder");
            yearsHolder.css("width", (sliderWidth + yearTextWidth) + "px !important");
            var min = $(this).slider("option", "min");
            var max = $(this).slider("option", "max");
            var currentYear = min;
            var yearHolder;
            while (currentYear <= max) {
                yearHolder = $("<div></div>");
                yearHolder.css("text-align", "left");
                yearHolder.css("position", "absolute");
                yearHolder.css("left", (((currentYear - min) / yearsPerText) * yearTextWidth) + "px");
                yearHolder.css("width", yearTextWidth + "px !important");
                yearHolder.html(currentYear);
                yearsHolder.append(yearHolder);
                currentYear += yearsPerText;
            }
        },
        slide: function(event, ui){
            var value = ui.value;
            $("#amount").html(value);
            var slider = $(this);
            var min = slider.slider("option", "min");
            var max = slider.slider("option", "max");
            var width = slider.width();
            $.each($("#yearsHolder div"), function(index, element){
                var div = $(element);
                var currentLeft = parseInt(div.css("left"));
                var currentYear = parseInt(div.html());
                div.css("left", ((value -...