Proportional Slider

by rsmclaug

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<div id="date-range"></div>
<br/>
<div id="date-value">1/1/2013</div>

JavaScript

$(function() {
    var values = [1357016400000, 1360000000000, 1368114000000, 1370059200000];
    
    var slider = $("#date-range").slider({
        orientation: 'horizontal',
        animate: "fast",
        min: 1357016400000,
        max: 1370059200000,
        values: [1357016400000],
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            var value = findNearest(includeLeft, includeRight, ui.value);
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }
            var time = slider.slider('values', 0);
            var d = new Date(); d.setTime(time);

            var curr_date = d.getDate();
            var curr_month = d.getMonth() + 1; 
            var curr_year = d.getFullYear();
            var newDate = curr_month + "/" + curr_date + "/" + curr_year;
            
            $("#date-value").html(newDate);
            return false;
        }
    });
    
    function findNearest(includeLeft, includeRight, value) {
        var nearest = null;
        var diff = null;
        for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                var newDiff = Math.abs(value - values[i]);
                if (diff == null || newDiff < diff) {
                    nearest = values[i];
                    diff = newDiff;
                }
            }
        }
        return nearest;
    }
});