jQuery UI slider and textbox value 2-way update

Question

I'm trying to implement the jQuery slider, which seems to be going ok, however, I'm not a javascript guy and as such I'm struggling to make the next step.

I have a slider and a visible textbox. What I want to do is update the textbox from the slider and update the slider value if a value is input directly into the textbox.

$(".amount-slider").slider({
    min: 100,
    max: 1000,
    step: 1,
    value: 300,
    animate: true,
    slide: function (event, ui) {

        $(this).next(".amount-value").val(ui.value);
    },
    create: function (event, ui) {
    }
});

Any ideas?

Can you show your html? Also, what will be the result of `alert(ui.value);` and `alert($(this).prop('class'));`? — Pavlo, Mar 07 '14 at 18:48

score 1 · Accepted Answer · answered Mar 07 '14 at 18:52

Attach an event handler to the textbox and update the slider when changed

$(".amount-slider").slider({
    min: 100,
    max: 1000,
    step: 1,
    value: 300,
    animate: true,
    slide: function (event, ui) {
        $(this).next(".amount-value").val(ui.value);
    },
    create: function (event, ui) {
        $(this).next(".amount-value").val(300);
    }
});

$(".amount-value").on('change', function() {
    $(this).prev('.amount-slider').slider('value', this.value );
});

FIDDLE

jQuery UI slider and textbox value 2-way update

1 Answers1