How can I have a range slider with negative values?

Question

I'm working with slider <input type="range" /> with:

• minimum value: -20
• maximum value: -90
• step : 15
• the value should be: -20, -35, -50, -65, -80
• the value of -90 will never reached because of the step constraint.

It works with positive value (min: 20, max: 90, step: 15) but I don't have an idea dealing with negative value.
Can you help me?

Codesandbox.io link

Answer 1

Set min value to -80 and add padding-left to the slider to let the user think that -90 is the min value.

const sliders = document.querySelectorAll("input[type=range]");

for (const slider of sliders) {
  slider.addEventListener('change', (e) => {
    e.target.nextElementSibling.value = e.target.value;
  });

  slider.nextElementSibling.value = slider.value;
}

input {
  padding-left: 15px;
}

<input type="range" min="-80" max="-20" step="15" />
<output></output>