Range Input Element: Is there a way to Dynamically Change the Min Value?

Question

I am working on a page using only html5 and jquery, and I have a range input as follows:

<input id="mySlider" type="range" class="test" min="2" max="32" step="2" value="10" />

Is there any way to dynamically alter the min of this input? I've tried referencing / setting by using getElementByID and trying to access the min attribute (the same way you could do for .value), but this doesn't appear to work. Thanks!

Rob W · Accepted Answer · 2011-11-02 14:55:19Z

3

I have successfully changed the value in many ways, including:

document.getElementById('mySlider').min = 5; // Example: min value of 5
$('#mySlider').prop('min', 5);               //jQuery method

Make sure that you have spelled document.getElementById correctly, using a lowercase d.

Go try this fiddle: http://jsfiddle.net/8W7FF/

answered Nov 2, 2011 at 14:55

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Andrew Over a year ago

+1 for using the correct method .prop over the acceptable but oh so wrong and confusing .attr

KeithComito Over a year ago

Hmm; it doesn't work for me: in my code I have: alert(document.getElementById('mySlider').value); alert(document.getElementById('mySlider').min); and the first alert is 10 and the second is undefined?

Rob W Over a year ago

@user201926 Use the fiddle. Does it produce the right results? If yes, the issue is caused by something else at your code. What browser are you using?

KeithComito Over a year ago

I don't see a slider on the fiddle?

KeithComito Over a year ago

Yeah; that's it. Well, you answered the stated question so I guess we can call this a case closed. Thanks!

|

James Montagne · Accepted Answer · 2011-11-02 14:56:37Z

0

$("#mySlider").attr("min",12);

should work.

http://jsfiddle.net/SNuK6/

answered Nov 2, 2011 at 14:56

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

hafichuk · Accepted Answer · 2011-11-02 14:56:56Z

0

How about accessing the attribute directly?

$("#mySlider").attr("min", 4);

See http://api.jquery.com/attr/

answered Nov 2, 2011 at 14:56

hafichuk

10.9k11 gold badges41 silver badges54 bronze badges

Collectives™ on Stack Overflow

Range Input Element: Is there a way to Dynamically Change the Min Value?

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related