jQuery Slider

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="slide">
  <label class="control-label">Time range:</label>
  <div id="slider-range"></div>
  <span id="time"></span>
</div>

JavaScript

$(document).ready(function() {
  // Slider
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 23,
    values: [0, 23],
    step: 1,
    slide: slideTime
  });
});

function slideTime(event, ui) {
  var val0 = ui.values[0],
    val1 = ui.values[1];
  var text = "";
  if (val0 < 12)
    text += val0 + "AM - ";
  else
    text += val0 + "PM - ";
  console.log(val0);
  console.log(val1);
  if (val1 < 12)
    text += val1 + "AM";
  else
    text += val1 + "PM";
  $("#time").text(text);
}