jQueri begin/end year slider

by ostapische

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="slider"></div>

JavaScript

function showValues(event, ui) {
    var values;
    if (!ui.values) {
        values = $("#" + event.target.id).slider("values");
    } else {
        values = ui.values;
    }
    if (values[0] == values[1]) {
        return false;
    } else {
        var periodFrom;
        values[0] % 1 == 0 ? periodFrom = 'beginnig of the year' : periodFrom = 'year-end';
        var periodTo;
        values[1] % 1 == 0 ? periodTo = 'beginnig of the year' : periodTo = 'year-end';
        $("#" + event.target.id + "-values").html('From ' + periodFrom + ' ' + parseInt(values[0]) + '<br />to ' + periodTo + ' ' + parseInt(values[1]));
    }
}
$(function() {
    $( "#slider" ).slider({
        range: true,
        min: 2010,
        max: 2013.5,
        step: 0.5,
        values: [2010, 2013.5],
        slide: showValues,
        create: showValues,
        change: showValues
    });
});