Working with basic jQuery slider

Question

As the title says, I'm trying to add a simple slider on an .html page.

This is my code:

$(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 = $("#slider-range").slider("values", 0),
    val1 = $("#slider-range").slider("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);
}

The problem that I'm facing is that the range should be from 0 to 23. However, when I use the slider, the lower bound goes from 1, to 0, to 1 again... As the upper bound seems to go from 22 to 23 to 22 again...

I'm not sure why this happens.

Here can be found an minimal example:

https://jsfiddle.net/7wft437c/

Answer 1

Instead of

var val0 = $("#slider-range").slider("values", 0),
val1 = $("#slider-range").slider("values", 1);

Get the values in this way

var val0 = ui.values[0],
val1 = ui.values[1];

This is the Fiddle

Answer 2

You need to change slide: slideTime to stop: slideTime.

slide gets the state before before the position changes, and your code is set up to evaluate where the slider is when the slide is done.

You can also call slideTime() after the slider is initialized so that it will label it before the user touches it:

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