CODEWITHSUNDEEP
jqueryhtml
Zora Li
Zora Li

Reputation: 31

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.

Upvotes: 3

Views: 4642

Answers (3)

J.W.
J.W.

Reputation: 33

I had a similar problem but not using jQuery but D3.js. As jimmetry already stated in his answer, jQuery seems not to be able to properly return the value of an <input type="range">. The same seems to hold true for D3.js.

In my case this lines of code returned no updated values, but always their initial value.

var min = $("#slider-min").attr("value");              // using jQuery
var min = d3.select("#slider-min").attr("value");      // using D3

Using the old-fashioned way, surprisingly the updated values were always returned:

var min = document.getElementById('slider-min').value;

Upvotes: 0

iainH
iainH

Reputation: 1084

You have to:

  1. change the value and

  2. trigger an onchange event.

I have been doing this with jQuery + QUnit + FuncUnit to handle the waits, but the following should only need jQuery. 

$('input[type="range"]').val('0.5').trigger('change');

where (min <= '0.5' => max)

Upvotes: 1

jimmetry
jimmetry

Reputation: 2219

I'm a little confused by your question, and this answer might be wrong, irrelevant, or too late, but I came across something potentially similar with Chrome v23 (current as of 24/12/12). As far as I know, jQuery uses getAttribute() and setAttribute() to interact with normal elements, but these functions do not seem to work for <input type="range">. Since there is no need for jQuery here (other than to simplify the selectors), I would recommend using the normal DOM document.getElementById('rangeElement').value = x; to get/set the value of the slider.

Upvotes: 3

Related Questions