HTML5 input type varies from positive to negative

Question

Is there a way to give a positive minimum and a negative maximum? I am trying to create a slider in the log space (10 ^ 8-10-13) and want to show the exponent on the slider.

<input type="range" min="8" max='-13' value="1" step="-1" id="myRange" > 

It is currently reverting to the default value max=100 .

Or maybe I can somehow undo the slider? Any help is appreciated.

EDIT: Please remember that I want the scale to DOWN from 8 to -13 (log space 10 ^ 8-10 ^ -13).

EDIT: in IDL xr = [8, -13] (or R xlim = c (8, -13)). Note that the minimum value is positive and max is a negative number, and you can step between them accordingly. I am asking for help in a workaround to create the same behavior with a range of input type.

Answer 1

You can simply switch the limits and multiple values ​​to -1 :

 <input type="range" min="-8" max='13' value="1" step="-1" id="slider" > $('#slider').change(function(){ var val = -+($(this).val()); console.log(val); }); 

If you need the presented value, copy it to a hidden field and use it on the server side instead of the original.

Live demo in jsFiddle .

Answer 2

This slider will be canceled: min (left) is 8, and max (right) is 13, I think this is what you wanted ... and step = -1 does not work.

HTML:

 <input type="range" min="-13" max="8" value="1" step="1" id="range"/> 

CSS

 #range{ transform: rotateY(180deg); } 

thanks css!

Answer 3

Scale the slider from 0 to 21 in steps of = 1.

In the change handler, compute 8 - $(this).val() to get the scaling that you really want.

HTML

 <input type="range" min="0" max='21' value="7" step="1" id="myRange"> 

Javascript

 $('#myRange').change(function () { var scaledValue = 8 - $(this).val(); console.log(scaledValue); }); 

Demo

Answer 4

You have added a condition that will not logically match. You need to change the minimum and maximum values ​​to make the slider:

  <input type="range" min="-13" max='8' value="1" step="1" id="myRange" > 

Working demo

Answer 5

I think that there is no way to allow a positive minimum and a negative maximum, but for this case we can use min = -8 and max = 13, and when changing we will assign a negative range value in the variable. eg.

 <script> var exponent=1; </script> <input type="range" min="-8" max='13' value="-1" step="1" id="myRange" onchange="document.exponent = - this.value;">