phenomenia phenomenia - 7 months ago 14
HTML Question

jQuery Slider slides one step too far

I couldn't find a solution to this problem I'm having with the default jQuery slider and outputting the current value:

It seems like the value is the one from the "previous" step.
With a min value of 0, a max value of 10 and step of 0.25 the most left position displays a value of 0.25 and the most right 9.75 - which is simply wrong.

Does anyone know why this is or how to fix it?

I tried to add my code to jsfiddle but I can't link to external resources that are not using https, and I don't find a URL of the latest jQuery and jQuery UI using https

HTML:

<div id="slider"></div>


JavaScript:

$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25
});
$('#slider').on('slide', function( event, ui ) {
var value = $('#slider').slider('option','value');
console.log(value);
});


Any help is much appreciated.

Answer

You just need to use ui.value to get the value of the slider:

$('#slider').on('slide', function( event, ui ) {
    console.log(ui.value);
});

If you want to see just the value where it stops, and not every value that the slider passes by, use the stop event:

$('#slider').on('slidestop', function( event, ui ) {
    console.log(ui.value);
});

See http://api.jqueryui.com/slider/#event-stop