pceccon February 2016

Working with basic jQuery slider

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/

Answers


Tony Hinkle February 2016

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();
});


Scott Marcus February 2016

Why are you adding the values configuration option. Try removing it:

 values: [0, 23],


Baro February 2016

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


BenG February 2016

The problem is the update function is firing as soon as its moved, before it reaches its new value.

try using change.

or if you want to keep it updating as you are sliding, use a timeout:-

function slideTime(event, ui) {
  setTimeout(function() {
    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);
  }, 100);
}

Fiddle


Cuchu February 2016

try this solution:

function slideTime(event, ui) {
val0 = ui.values[0];
val1 = ui.values[1];

  var text = "";
  if (val0 < 12)
    text += val0 + "AM - ";
  else
    text += val0 + "PM - ";

  if (val1 < 12)
    text += val1 + "AM";
  else
    text += val1 + "PM";
  $("#time").text(text);
}


stark February 2016

Check this working sample here where you can define a separate slide function based on your required slider behaviour : here

  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [0, 1440],
    slide: function(e, ui) {
      var hours1 = Math.floor(ui.values[0] / 60);
      var minutes1 = ui.values[0] - (hours1 * 60);
      $('.slider-time').html(hours1 * 100 + minutes1 * 1);
      if (hours1.length == 1) hours1 = '0' + hours1;
      if (minutes1.length == 1) minutes1 = '0' + minutes1;
      if (minutes1 == 0) minutes1 = '00';
      if (hours1 >= 12) {
        if (hours1 == 12) {
          hours1 = hours1;
          minutes1 = minutes1 + " PM";
        } else {
          hours1 = hours1 - 12;
          minutes1 = minutes1 + " PM";
        }
      } else {
        hours1 = hours1;
        minutes1 = minutes1 + " AM";
      }
      if (hours1 == 0) {
        hours1 = 12;
        minutes1 = minutes1;
      }
      var hours2 = Math.floor(ui.values[1] / 60);
      var minutes2 = ui.values[1] - (hours2 * 60);
      $('.slider-time2').html(hours2 * 100 + minutes2 * 1);
      if (hours2.length == 1) hours2 = '0' + hours2;
      if (minutes2.length == 1) minutes2 = '0' + minutes2;
      if (minutes2 == 0) minutes2 = '00';
      if (hours2 >= 12) {
        if (hours2 == 12) {
          hours2 = hours2;
          minutes2 = minutes2 + " PM";
        } else if (hours2 == 24) {
          hours2 = 11;
          minutes2 = "59 PM";
        } else {
          hours2 = hours2 - 12;
          minutes2 = minutes2 + " PM";
        }
      } else {
        hours2 = hours2;
        minutes2 = minutes2 + " AM";
      }
    }
  });
    

Post Status

Asked in February 2016
Viewed 1,599 times
Voted 6
Answered 6 times

Search




Leave an answer