CODEWITHSUNDEEP
javascripthtml
user2656866
user2656866

Reputation: 113

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.

Upvotes: 8

Views: 21825

Answers (4)

L777
L777

Reputation: 8457

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 .0 on 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>

Upvotes: 16

Cybernetic
Cybernetic

Reputation: 13334

For setting this dynamically using JavaScript:

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

Upvotes: 0

Bryce
Bryce

Reputation: 6610

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.

Upvotes: 11

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382160

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.

Upvotes: 1

Related Questions