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 basically want a from - to slider, not min - max

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

It's not possible to have a number smaller than 0 yet larger than 100, simply invert the value that is displayed. — Spencer Wieczorek
– Spencer Wieczorek, Commented Dec 4, 2015 at 18:46
Also I'd like to know why someone would downvote this question.. — CoderPi
– CoderPi, Commented Dec 4, 2015 at 19:00
Don't worry about the down votes, most people down vote because they do not understand the question, it happens a lot these days :) — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Dec 4, 2015 at 19:18

Djave · Accepted Answer · 2015-12-07 09:23:44Z

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

I know, mathematicly it is possible when dealing with the output. But then also the Infobox would be wrong, etc
The info box in my snippet works fine, and as (I don't want to state the obvious) you literally can't have a minimum of 100 and a maximum of 0. Unless your whole webpage is also displayed upside down ;)
By info-box I mean the little box that is displayed at the slider-position displaying the current value of the slider (in some browsers), wich then ofc. then is inversed
Yeah, I want to use the slider as a "range", wich of cause has not min and max values, but from and to values.

Spencer Wieczorek · Accepted Answer · 2015-12-04 19:07:19Z

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>

Thank you for the good answer. Also it did not help solving my problem, I am sure it will help future readers.

Robert McKee · Accepted Answer · 2015-12-04 20:03:47Z

Four different approaches, each with slight quirks.

You can change the direction via direction: rtl, but it changes what part of the slider is highlighted in IE use #fixed1::-ms-fill-lower { background-color: transparent; } to remove the highlight.
You can horizontally flip the slider via transform: scaleX(-1), but that puts the shading of the pointer in firefox on the wrong side.
You can rotate the slider via transform: rotate(180deg), but that put the pointer upside down in firefox.
You can use a 100-x hack, but the tooltip on the slider shows the incorrect value.

I would probably use direction: rtl, and if the highlighting bothers you see about removing the styling in IE if it's possible.

#fixed1 { direction: rtl} #fixed2 { transform: scaleX(-1); } #fixed3 { transform: rotate(180deg); } /* IE fixes */ #fixed1::-ms-fill-upper { background-color: rgba(54, 153, 201, 1); } #fixed1::-ms-fill-lower { background-color: transparent; } #fixed2::-moz-range-thumb { transform: scaleX(-1); } #fixed3::-moz-range-thumb { transform: rotate(180deg); }

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: rtl (highlighted part different in IE) <input id='fixed1' 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: flip (shading on wrong side in firefox) <input id='fixed2' 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: rotate (pointer upside down in firefox) <input id='fixed3' 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: hack (tooltip is wrong) <input type="range" min="0" max="100" step="any" style="width: 100%;" oninput="document.getElementById('test').innerHTML = 100 - this.value" onchange="document.getElementById('test').innerHTML = 100 - this.value" /> <br /> <div id="test"></div>

Thank you for the good answer. Also it did not help solving my problem, I am sure it will help future readers.
You can use the ::-ms-fill-upper and ::-ms-fill-lower to swap the colors around for IE, that should solve the majority of the issues direction:rtl. I would expect that doing much more than that might break mobile browsers that give a native UI for some elements.

CoderPi · Accepted Answer · 2015-12-04 21:13:02Z

I found another way to do this without the side-effects I was concerned about:

it unifyes the appearance of the slider in all browsers, wich otherwise is very different. (the elements value however will always be from 0 to 1)

function sliderOutput(percentage, from, to) { document.getElementById('test').innerHTML = fromTo(percentage, from, to) } function fromTo(percentage, from, to) { return from + (to - from) * percentage }

input[type="range"] { width: 150px; /* default diffrent in every Browser */ height: 20px; /* default diffrent in every Browser */ background-color: lightgray; /* default transparent or white in FireFox */ margin: 0; /* Edge and Chrome */ padding: 0; /* IE and FireFox */ outline: none; /* Chrome */ -webkit-appearance: none; /* Chrome fix */ } input[type="range"]::-moz-range-track { border: inherit; background: transparent; } input[type="range"]::-ms-track { border: inherit; color: transparent; background: transparent; } input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { display: none; } input[type="range"]::-ms-tooltip { display: none; } /* Thumb-Classes can not be merged */ input[type="range"]::-webkit-slider-thumb { width: 30px; height: 20px; border: none; background-color: gray; -webkit-appearance: none; /* Chrome fix */ } input[type="range"]::-moz-range-thumb { width: 30px; height: 20px; border: none; border-radius: 0; background-color: gray; } input[type="range"]::-ms-thumb { width: 30px; height: 20px; border: 0; /* IE */ background-color: gray; }

0 to 100: <input type="range" min="0" max="1" step="any" step="any" oninput="sliderOutput(this.value, 0, 100)" onchange="sliderOutput(this.value, 0, 100)" /> <br /> 100 to 0: <input type="range" min="0" max="1" step="any" step="any" oninput="sliderOutput(this.value, 100, 0)" onchange="sliderOutput(this.value, 100, 0)" /> <br /> <br /> Value: <span id="test"></span>

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Hot Network Questions