0
544
ViewsHow can I have a range slider with negative values?
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?
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
You cannot do it by simply using HTML as -90 is lower than -20 so you cannot set min="-20" max="-80". But by using this trick you may achieve your output.
Keep the HTML as:
<input type="range" min="20" max="90" step="15"/>
<output></output>
Change your JavaScript to:
for (const slider of sliders) {
slider.addEventListener("change", (e) => {
e.target.nextElementSibling.value = "-" + e.target.value;
});
slider.nextElementSibling.value = "-" + slider.value;
}
·
Juan Pablo Isaza
Report
Answer question