HTML5 input range: allow "min" bigger then "max" (from to)

Question

on the <input type="range" /> I need the min=""-value to be bigger than the max=""-value,
for example values from 100 to 0:

<input type="range" min="100" max="0" />

Is this possible in some way? It would be fine to use JavaScript.

Here a Demo of what I mean:

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input type="range" min="100" max="0" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: hack
<input type="range" min="0" max="100" step="any" style="width: 100%; direction: rtl;"
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

<div id="test"></div>

I basicly want a from - to slider, not min - max

---

EDIT: I don't want this to happen: (slider colors are flipped as well) Wich is done by my example direction: rtl; but also transform: scaleX(-1); and transform: rotate(180deg);

Answer 1

To answer your question, it is not possible to have the minimum value higher than the maximum value or include a from or to attribute without majorly hacking the input

Just make sure that the final number you are using is 100 minus your slider size.

I would also add a hidden input, and update that input's value – as you're going to mess with the actual value of the slider with this method.

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input type="range" min="0" max="100" step="any" style="width: 100%"
       oninput="document.getElementById('test').innerHTML = 100 - parseInt(this.value)" 
       onchange="document.getElementById('test').innerHTML = 100 - parseInt(this.value); document.getElementById('slider-value').value = 100 - parseInt(this.value)" />
<br />
Hidden input <input type="text" id="slider-value">
<div id="test"></div>

Edit 2: There is this overview by w3 https://www.w3.org/wiki/HTML/Elements/input/range and unfortunately the range input doesn't have the attributes you require. If you need to make a bespoke input, you can sort of cheat. Funnily enough, I made a range based input that would accept mouse wheel events – to an extent – but it may be useful to see how I hid the input and replaced it with another interface: http://codepen.io/EightArmsHQ/pen/CfmeE

Answer 2

Keep the same values for min and max but rotate it around by 180 degrees. Or you can apply scaleX(-1) to flip it horizontally.

#flip {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
} 

#flip {
    -ms-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1);
} 

0 to 100: (this is working)
<input type="range" min="0" max="100" step="any" style="width: 100%" 
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

100 to 0: (not working in IE, Edge, Firefox and Chrome*)
<input id="flip" type="range" min="0" max="100" step="any" style="width: 100%"1
       oninput="document.getElementById('test').innerHTML = this.value" 
       onchange="document.getElementById('test').innerHTML = this.value" />
<br />

<div id="test"></div>