HTML5 input type range from positive to negative

Question

Is there any way to allow a positive minimum and a negative maximum? I am trying to create the slider in 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" >

This currently reverts to the default max=100 value.

Or perhaps can I reverse the slider in some way? Any help would be much appreciated.

EDIT: Please remember I want the scale to be DECREASING 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 a positive and the max is a negative number, and you can step between the two accordingly. I am asking for help with a workaround to create the same behaviour with the input type range.

Answer 1

You could simply switch the limits and multiply the value by -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'll need the value to be submitted, copy it to a hidden field, and use that on server-side instead of the original.

A live demo at jsFiddle.

Answer 2

Scale the slider from 0 to 21 with step=1.

In the change handler, calculate 8 - $(this).val() to give the scaling you actually 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 3

I think there is no way to allow a positive minimum and a negative maximum, but for the given case we can use min = -8 and max = 13 and on change we will assign negative of range value in a variable. e.g.,

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

Answer 4

This slider will be reversed: min(left) is 8 and max(right) is -13, i think this is what you wanted... and step=-1 don't works.

HTML:

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

css:

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

Thx css!

Answer 5

You have added the condition which is not going to satisfy logically. You need to swap the min and max value to make slider work:

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

Working Demo