0

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>
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67

1 Answers1

1

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

DEMO: http://jsfiddle.net/dirtyd77/v3gUg/30/

Dom
  • 38,906
  • 12
  • 52
  • 81
  • Thank you so much! I'd been driving myself crazy trying to figure this out :-) I hadn't been able to get it to work with the jQuery UI slider either (which is why I wasn't sure if the problem was related to onstatechange or not). Out of curiosity, would I use the same code if I wanted to do this with the jQuery UI slider? – Chaya Cooper Mar 18 '13 at 19:28
  • 1
    IMHO, I feel jQueryUI slider is the way to go about this (it's a lot cleaner). It's pretty similar but there are slight differences. Here is the [doc](http://api.jqueryui.com/slider/) and a demo of how to go about it in this manner: http://jsfiddle.net/dirtyd77/SLGdE/29/ – Dom Mar 18 '13 at 19:39
  • It's definitely easier to work with the jQueryUI slider :-) Unfortunately I need tick marks for these particular sliders and was having a hard time adding them without a plugin. Any chance that you might know of a better way to add tick marks to the UI slider? – Chaya Cooper Mar 18 '13 at 19:49
  • This should help: http://stackoverflow.com/questions/8648963/add-tick-marks-to-jquery-slider – Dom Mar 18 '13 at 19:53
  • I've been trying to figure out how to combine the function for the jQuery UI slider with the code from this answer http://stackoverflow.com/a/13747926/1056713 Any chance that you could show me how to apply it? – Chaya Cooper Mar 19 '13 at 14:59