Getting the value from a jQuery UI Slider

Question

I have a jQuery UI slider that is part of a rating system. You slide to values 1 - 5 in order to rate it 1 thru 5. I have it defaulted to 3 when the slider first appears. Th

Answer 1

Use ui.value in the change event handler.

$('#ratingSlider').change(function(e, ui) {
    $('#rateToPost').attr('value', ui.value);
});

Answer 2

To display rating as you slide in your slider initialization you need to change the text of that div (Assuming you have a div (not an input box) with an id "ratingResult"). To update the value when user finishes dragging you need to add the change event to the initialization code.

$("#ratingSlider").slider({
    range: "min",
    value: 3,
    min: 1,
    max: 5,
    //this gets a live reading of the value and prints it on the page
    slide: function(event, ui) {
      $("#ratingResult").text(ui.value);
    },
    //this updates the value of your hidden field when user stops dragging
    change: function(event, ui) {
      $('#rateToPost').attr('value', ui.value);
    }
  });