CODEWITHSUNDEEP
javascriptjqueryhtml
user3615851
user3615851

Reputation: 990

Jquery ui slider controls not updating value

I've set up a JQuery UI range slider with controls, although when clicking on the controls the value sent to a select dropdown is not updated. How could I fix this?

var gmin = 0;
var gmax = 500;

var s =  $( "#slider" ).slider({
    value:5,
    min: gmin,
    max: gmax,
    step: 100,
    slide: function( event, ui ) {
        $( "#select span" ).html(ui.value);
    }
});
$('#down').click(function() {       
    s.slider('value', s.slider('value') + s.slider( "option", "step" ) );   
});

$('#up').click(function() {
    s.slider('value', s.slider('value') - s.slider( "option", "step" ) );   
});

View JSFiddle

Upvotes: 2

Views: 1670

Answers (3)

SebasSBM
SebasSBM

Reputation: 908

You just need to add this line to the click functions:

$( "#select span" ).html(s.slider('value'));

...on #up and #down listeners.

However, it seems that Ivan's answer is a better approach than mine

Upvotes: 2

Ivan
Ivan

Reputation: 1241

Since this event wont store value for this element, besides here is workaround:

http://jsfiddle.net/nrNX8/514/

You have to add 

$('#select span').text(s.slider('value'));

It may be useful for any element you want to set in any update.

Upvotes: 2

Scimonster
Scimonster

Reputation: 33399

You need to use the change event, not slide here. slide() only catches manual user slides, not programmatic ones:

var s =  $( "#slider" ).slider({
    value:5,
    min: gmin,
    max: gmax,
    step: 100,
    change: function( event, ui ) {
        $( "#select span" ).html(ui.value);
    }
});

(Any reason your down button makes it go up and vice versa?)

Upvotes: 3

Related Questions