'How to create slider with decimal values using html

I want to create a slider showing decimal values like 0.0 to 0.1 using html or html5.

javascripthtml


Solution 1:[1]

Add step="0.1" in your input range tag like this: <input type="range" min="0.1" max="1.0" step="0.1" value="1"> Example:

document.getElementById("scale").oninput = function() {
  document.getElementById("spanscale").innerHTML = this.value;
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>

If you want to show a decimal place in integer numbers you can add this piece of code in the value output: Number(this.value).toFixed(1)

document.getElementById("scale").oninput = function() {
  document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>

Solution 2:[2]

It sounds like you want an input field that the user can click arrows to increment/decrement a value in steps of 0.1. If that's the case, you want to use an HTML5 numeric input element:

<input type="number" min="0" max="1" step="0.1" value="0.5" />

Find out more here at HTML5 Goodies.

Solution 3:[3]

As you precise HTML5, then you can use the new input type range :

<input type="range" name="things" min="1" max="10">

enter image description here

Demonstration

Be aware that it doesn't work on IE9-,though.

Solution 4:[4]

For setting this dynamically using JavaScript:

document.getElementById("my_slider").setAttribute("step", "0.1");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bryce
Solution 3
Solution 4 Cybernetic

Related Questions