Difficulty setting the value of another form element from slider value

Question

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>

Dom · Accepted Answer · 2013-03-18 19:19:28Z

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/

answered Mar 18, 2013 at 19:19

Dom

40.7k12 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chaya Cooper Over a year ago

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?

Dom Over a year ago

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 and a demo of how to go about it in this manner: jsfiddle.net/dirtyd77/SLGdE/29

Chaya Cooper Over a year ago

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?

Dom Over a year ago

This should help: stackoverflow.com/questions/8648963/…

Chaya Cooper Over a year ago

I've been trying to figure out how to combine the function for the jQuery UI slider with the code from this answer stackoverflow.com/a/13747926/1056713 Any chance that you could show me how to apply it?

Collectives™ on Stack Overflow

Difficulty setting the value of another form element from slider value

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related