Range Slider

by Gustavo Ramoscelli

HTML

<div class="row">
<label>Nivel de Zoom:</label><br />
<input type="radio" value="month"  name="zoom" id="only_month" checked><label for="month_zoom">Mes</label>
<br />
<input type="radio" value="day" name="zoom" id="only_day"><label for="day_zoom">Día</label>
<br />
<input type="radio" value="hour"  name="zoom" id="only_hour"><label for="hour_zoom">Hora</label>
<br />
<input type="radio" value="minute" name="zoom" id="only_minute"><label for="minute_zoom">Minuto</label>
<br />
<input type="radio" value="second" name="zoom" id="only_second"><label for="second_zoom">Segundo</label>
<br />
</div>
<div class="row month">
<br />
<br />
<label>Mes Seleccionado</label>
<input type="text" id="sel_month" size="30" readonly/>
<br />
<br />
<div id="slider-month"></div>
<br />
</div>
<div class="row day">
<br />
<label>Día Seleccionado</label>
<input type="text" id="sel_day" size="30" readonly/>
<br />
<br />
<div id="slider-day"></div>
<br />
</div>
<div class="row hour">
<br />
<label>Hora Seleccionada</label>
<input type="text" id="sel_hour" size="30" readonly/>
<br />
<br />
<div id="slider-hour"></div>
<br />
</div>
<div class="row minute">
<br />
<label>Minuto Seleccionado</label>
<input type="text" id="sel_minute" size="30" readonly/>
<br />
<br />
<div id="slider-minute"></div>
<br />
</div>
<div class="row second">
<br />
<label>Segundo Seleccionado</label>
<input type="text" id="sel_second" size="30" readonly/>
<br />
<br />
<div id="slider-second"></div>
<br />
</div>

CSS

div.row { 
  border: 1px solid;
}
.container div.row:last-child {
  border-bottom: 1px solid;
}

JavaScript

var min_year = 2016;
var interval_years = 5; // in years

var dt1 = new Date();
var dt2 = new Date();
var interval_days;

function valueToStartDate(value) {
  var dt = new Date(Math.floor(value / 24) + min_year,  
                    Math.floor((value % 24) / 2) + 1,
                    ((value % 2) ? 15 : 1),
                    0, 0, 0, 0);
  dt1 = dt;
  return dt.toLocaleDateString();
}

function valueToEndDate(value) {
  value+=2;
  var dt = new Date(Math.floor(value / 24) + min_year,  
                    Math.floor((value % 24) / 2) + 1,
                    ((value % 2) ? 15 : 1),
                    0, 0, 0, 0);
  dt.setTime(dt.getTime()-86400*1000);
  dt2 = dt;
  interval_days = Math.floor((dt2.getTime()-dt1.getTime())/(86400*1000));
  return dt.toLocaleDateString();
}

function valueToDate(value) {
  var dt = new Date();
  dt.setTime((value/interval_days)*(dt2.getTime()-dt1.getTime())+dt1.getTime());
  return dt.toLocaleDateString();
}

$(function() {
    $( "#slider-month" ).slider({
      range: false,
      min: 0,
      max: interval_years*24 - 1,
      step: 1,
      value: 10,
      slide: function( event, ui ) {
        $( "#sel_month" ).val( valueToStartDate(ui.value) + " - " +  valueToEndDate(ui.value) );
        $( "#slider-day" ).slider('option', {min: 0, max: interval_days});
        $( "#slider-day" ).slider('value', 0);
      }
    });
    $( "#slider-day" ).slider({
      range: false,
      min: 0,
      max: 30,
      step: 1,
      value:  0,
      slide: function( event, ui )  {
        $( "#sel_day" ).val( valueToDate(ui.value));
        $( "#slider-hour" ).slider('value', 0);
      },
      change: function( event, ui )  {
        $( "#sel_day" ).val( valueToDate(ui.value));
        $( "#slider-hour" ).slider('value', 0);
      },
    });
    $( "#slider-hour" ).slider({
      range: false,
      min: 0,
      max: 23,
      step: 1,
      value:  0,
      slide: function( event, ui ) {
        $( "#sel_hour" ).val( ui.value );
     ...