Monday, February 13, 2012

Input type=range does not update its value


I have the following:




<input id="slider-min" type="range" min="0" max="55" value="0"
step="5" onchange="sliderMinUpdate(this.value)">,

<div id="min_input">0</div>

<input id="slider-day" type="range" min="0" max="10" value="0"
step="0.5" onchange="sliderDayUpdate(this.value)">

function sliderDayUpdate(value){
$('#slider-min').val(0);
}

function sliderMinUpdate(value){
$('#min_input').text(value);
}



When I focus in slider-min using keyboard and select keypad right or left it updates values in min_input correctly. When I change slider-day it fires onChange and updates the value from slider-min to 0 and I can see it working in my page (the slider returns to 0). The problem occurs when I select the first increment of slider-min , in this case 5. When the onChange from slider-day is called it updates slider-min to 0, correctly, but when I move from 0 to 5( slider-min ) it does not work. If I continue moving it works.



Looks like the state 5 was maintained in slider-min , so when I set $('#slider-min').val(0) , the slider is updated, but when I change from 0 to 5, the onchange="sliderMinUpdate(this.value)" is not called.



Have no idea what's going on.

No comments:

Post a Comment