cytsunny cytsunny - 2 months ago 33
HTML Question

How to reverse the direction in HTML5 range input?

To have a slidebar in HTML5, we may use range input. i.e.

<input type="range" min="0" max='5' value="0" step="1" >

The default behavior is to have minimum value on the left side and maximum value on the right side. Is there a way I can put the maximum value on the left side instead?

I know I can do that with Javascript. Is there a way to do that with HTML alone?

Reply to "possible duplicate question":

That question accept javascript solution, and I am asking for HTML only solution. I think it is obvious that it is not a duplication?


This might do the trick: setting the direction of the input to be right to left on the CSS

#reversedRange {
  direction: rtl

See sample code below:

PS the javascript/jquery code is only to illustrate the values changing and it's not needed. Only the CSS and the id attribute on the input element

$(function() {
  $("#reversedRange").on('change', function() {
#reversedRange {
  direction: rtl
<script src=""></script>
Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min
<div>value: <span id="rangeValue"></span>