HTML Input Range Type With Floating Point Number

Details

• This example uses the `step` attribute of an range type input element to make a floating point value (e.g. `4.3`) instead of an integer (e.g. `4`)

HTML

<input id="alfa" type="range" min="0" max="10" step="0.1" value="0" />

EXAMPLE

Demonstration JavaScript

This is the code that powers the example. It's not necessary for the value to be updated. It just makes it easier to see by update a div with the id `alfaValue`

const handleInput = (event) => {
    document.getElementById('alfaValue').innerHTML = event.target.value
}

const init = () => {
    document.getElementById('alfa').addEventListener('input', handleInput)
}

document.addEventListener('DOMContentLoaded', init)

References

• MDN: Input range type
• MDN: Input step attribute