JQuery UI Time Range Slider with Values

This is a JQuery UI Time Range Slider with the Time Range values displayed and formatted in "civilian time" or military time depending on how you set the militaryTime variable (true/false)

by Tech Savant

HTML

<div id="time-range">
  <p>Time Range: <span class="slider-time">10:00</span> - <span class="slider-time2">12:00</span>
  </p>
  <div class="sliders_step1">
    <div id="slider-range"></div>
  </div>
</div>

CSS

#time-range p {
  font-family: "Arial", sans-serif;
  font-size: 14px;
  color: #333;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #5BA8E1;
  box-shadow: 0 1px 0 #AAD6F6 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  background: #81B8F3;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
  background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
  background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
  background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
  background-image: linear-gradient(top, #A0D4F5, #81B8F3);
}

.ui-slider .ui-slider-handle {
  border-radius: 50%;
  background: #F9FBFA;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
  background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
  background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
  background-image: -o-linear-gradient(top, #C7CED6,...

JavaScript

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 1440,
  step: 15,
  values: [600, 720],
  slide: function(e, ui) {

    var militaryTime = true; //24 hr format

    var hours1 = Math.floor(ui.values[0] / 60);
    var minutes1 = ui.values[0] - (hours1 * 60);

    if (hours1.toString().length == 1) hours1 = '0' + hours1.toString();
    if (minutes1.toString().length == 1) minutes1 = '0' + minutes1;
    if (minutes1 === 0) minutes1 = '00';
    if (parseInt(hours1) > 12) {

      if (!militaryTime) {
        hours1 = militaryTime ? hours1 : hours1 - 12;
        minutes1 = militaryTime ? minutes1 : minutes1 + " PM";
      }

    } else {
      hours1 = hours1;


      minutes1 = militaryTime ? minutes1 : minutes1 + " AM";
    }
    if (parseInt(hours1) === 0) {

      hours1 = militaryTime ? hours1 : 12;
      minutes1 = minutes1;
    }



    $('.slider-time').html(hours1 + ':' + minutes1);

    var hours2 = Math.floor(ui.values[1] / 60);
    var minutes2 = ui.values[1] - (hours2 * 60);

    if (hours2.toString().length == 1) hours2 = '0' + hours2.toString();
    if (minutes2.toString().length == 1) minutes2 = '0' + minutes2.toString();
    if (parseInt(minutes2) === 0) minutes2 = '00';
    if (parseInt(hours2) > 12) {
      if (parseInt(hours2) === 24) {
        hours2 = 11;
        minutes2 = "59 PM";
      } else {
        hours2 = militaryTime ? hours2 : hours2 - 12;
        minutes2 = militaryTime ? minutes2 : minutes2 + " PM";
      }
    } else {
      hours2 = hours2;
      minutes2 = militaryTime ? minutes2 : minutes2 + " AM";
    }

    $('.slider-time2').html(hours2 + ':' + minutes2);
  }
});