How to reverse the direction in HTML5 range input?

Question

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?

Answer 1

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

Updated: based on comments by @MCTaylor17 (thanks)

$(function() {
  $("#rangeValue").text($("#reversedRange").val());
  
  $("#reversedRange").on('change input', function() {
    $("#rangeValue").text($(this).val());
  });
});

#reversedRange {
  direction: rtl
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Max<input type="range" min="0" max='5' value="0" step="1" id="reversedRange">Min
<div>value: <span id="rangeValue"></span>
</div>