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. The form that it is part of has a hidden input whose value should be the value of the slider, but it is not.
Here's the jQuery:
$( "#ratingSlider" ).slider({
range: "min",
value: 3,
min: 1,
max: 5,
slide: function( event, ui ) {
$( "#ratingResult" ).val( ui.value );
}
});
$( "#ratingResult" ).val( $( "#ratingSlider" ).slider( "value" ) );
$("#ratingSlider").change(function(){
$( "#rateToPost" ).attr('value', $( "#ratingSlider" ).slider( "value" ) );
});
I tried making the .val() of #rateToPost to be the .val() of the slider, but it always only gave it 3 (the default value).
How can I make it 开发者_C百科pass the value properly?
Also, I want to have the value automatically refresh (right now it is displayed using a text box but I really don't want to use a text box) on the page whenever the slider is moved, how can I do that?
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);
}
});
Use ui.value
in the change event handler.
$('#ratingSlider').change(function(e, ui) {
$('#rateToPost').attr('value', ui.value);
});
精彩评论