jQuery.val not working on range input?

Question

<input type="range" value="5,17" />

If I try to change the value with $('input').val('8,20'); it doesn't change...

But on hidden inputs works: <input type="hidden" value="s" />

Answer 1

The HTML5 <input type="range" /> does only handle one value between min and max attribute - e.g.:

<input type="range" min="1" max="10" value="5.3" step="0.1" />

$("input[type=range]").val(); // returns 5.3
$("input[type=range]").val(6); // sets value to 6
$("input[type=range]").val(); // returns 6

If you want to have the slide handle a min and a max value in one UI-input you could possibly use jQueryUI's slider: https://jqueryui.com/slider/#range

Answer 2

I tried setting up a fiddle and it worked without problems.

http://jsfiddle.net/Z2B7Y/

Keep in mind that the value represents the numerical value, that's between the min and max attributes. Trying to set it to 8,20 it's not valid, because it's not a valid number and therefore doesn't make sense.

If you want to set a floating point value you have to use the dot, e.g.

$('input').val('8.20');

If you want to set instead the bounds of the range you have to change the properties, e.g.

$('input').prop('min','8');
$('input').prop('max','20');

Hope this helps.