Search code examples
jquery-uijquery-ui-slider

Appending string for value to jQuery.ui handle

So close! Why on earth is this code not working? On the first slide it gets it's new value (2) but keeps the same message "terrible". Then after that works fine, except the messages are all stepped back one position. It's driving me mad!

var messages = {
  1: "terrible",
  2: "okay",
  3: "better",
  4: "great",
  5: "super!"
};

initialValue = 1

var messageUpdate = function(event, ui) {
  var curValue = ui.value || initialValue;
  var message = '<div id="out">' + (messages[$('#slider').slider('value')]) + '</div>';
  $('.ui-slider-handle').html(message);
}

$("#slider").slider({
  value: initialValue,
  min: 1,
  max: 5,
  step: 1,
  create: messageUpdate,
  slide: messageUpdate
});
Solution

  • Of course, as soon as you see it on here in black and white it becomes obvious:

    var curValue = ui.value || initialValue;
var message = '<div id="out">' + (messages[curValue]) + '</div>';

    I was not using my own code!