I need to set the value of a slider if the value of another element changes and vice versa, but I'm having difficulty setting the value of another form element to the value of slider.
The function below changes the Slider value when the value of the Select element is changed, but I can't get it to work in reverse. I've posted a fiddle of it here: http://jsfiddle.net/chayacooper/v3gUg/28/
I'm using the jQuery Slider Plugin, jquery-1.8.2 and jquery-ui-1.9.1.
JS
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
change: function (evt) {
$("#SliderSelect")[0].value = $(evt.target).slider("value");
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1);
});
});
I've also tried replacing the code with this statement and using a textbox instead of the select element, with the same result
$('#text_value').val( $(evt.target).slider("value") );
HTML
<div class="layout-slider">
<div id="Slider" type="slider" name="area" value="3"></div>
</div>
<select name="SliderSelect" id="SliderSelect">
<option>1</option>
<option>2</option>
<option selected=selected>3</option>
<option>4</option>
<option>5</option>
</select>
According to the doc you provided, you need to use onstatechange. Also, for some reason, the slider needs two values in order for it to work...
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
onstatechange: function (evt) {
//evt.target was causing internal error
// $("#SliderSelect").val($(evt.target).slider("value"));
$("#SliderSelect").val(evt);
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1, this.selectedIndex + 1);
});
});