CODEWITHSUNDEEP
jquery
vtj205
vtj205

Reputation: 285

Jquery UI slider and detect max - min range

I'm trying to use jquery ui to display the range between the two values, which change when the user moves the max and min values. I created a jsfiddle with my attempt. I tried doing it with ("values")[1]) - (("values")[0]) but it didn't work.

http://jsfiddle.net/t1h3tm23/2/

<div id="slider"></div>
<input type="text" id="result" />

$( "#slider" ).slider({
range: true,
min: 0,
max: 500,
values: [ 190, 290 ],
slide: function( event, ui ) {
$( "#result" ).val( ui.value );
$(ui.value).val($('#result').val());
}
});
$("#slider").slider("value" , $(this).val())

Upvotes: 1

Views: 411

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

ui.values[1] - ui.values[0] should work

$("#slider").slider({
    range: true,
    min: 0,
    max: 500,
    values: [190, 290],
    slide: function (event, ui) {
        // get difference b/w min and max
        $("#result").val(ui.values[1] - ui.values[0] ); 
        $(ui.value).val($('#result').val());
    }
});

Demo --> http://jsfiddle.net/t1h3tm23/3/

Upvotes: 4

Related Questions