How to change input range value from 1.9 to 2.0?

Question

I have:

<input type="range" id="rating-range-btn" name="ratingrange" min="5" value="5" max="10" step="0.1">

I need to change input value from 1.9 to 2.0 but it shows only 2 without dot and zero

https://stackoverflow.com/questions/22641074/html5-number-input-always-show-2-decimal-places — robinsax, May 11 '20 at 19:35
Is there any way to do this using pure javascript or in html? — Gurami Nikolaishvili, May 11 '20 at 19:38
Anything you can do in jQuery you can do in pure HTML. There's no way to force the browser to display the decimal places for whole numbers using just HTML. — robinsax, May 11 '20 at 19:39
@robinsax *Anything you can do in jQuery you can do in pure HTML.* <-- Uh, no. Maybe you meant anything you can do in JQuery you can do with Vanilla JavaScript? — Scott Marcus, May 11 '20 at 19:42
"I need to change input value from 1.9 to 2.0 but it shows only 2" well as I can see the min attribute is set to 5 so 1.9 and 2 and ... I don't undertand what you are doing, because the range is from 5 to 10 and you are talking about 1.9 and 2.0 — Saadi Toumi Fouad, May 11 '20 at 20:38

Scott Marcus · Accepted Answer · 2020-05-11T19:54:59.947

You'll have to trigger a callback function each time the value changes to adjust the value of another element that gets its value from the range because the range value (when a whole number is reached) can't be adjusted.

document.getElementById("rating-range-btn").addEventListener("change", function(e){
  // Force the string value of the range to a number and then force the 
  // number to have a single decimal
  output.textContent = parseFloat(this.value).toFixed(1);
});

<input type="range" id="rating-range-btn" name="ratingrange" min="5" value="5" max="10" step="0.1">
<div id="output">5.0</div>

How to change input range value from 1.9 to 2.0?

1 Answers1