Negative step

[matejevic]

Hello,

I'd like to set up negative step like "-5" here, so that the left end is 125 and the right end is 90.
And when I move the slider to the right side, it should decrease by 5.

<input type="range" class="size-range sofa" value="125" min="90" max="125" step="-5" data-index="option1" data-range="sofa" data-price-index="1" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">

Is this possible?

Thanks.

[matejevic]

I've tried to use transform: scaleX(-1), but clicking on the initialized range slider was working as not flipped. When I click the left most one (targeting 125), it still sets the value to the smallest value (90).

[andreruffert]

@matejevic have a look at this codepen.
It describes an approach of value mapping. I guess this would be the easiest way to achieve this.
In your case this would look something like this:

<input type="range" min="0" max="7" step="1" value="0">

const valueMapping = [125, 120, 115, 110, 105, 100, 95, 90]