Decimals in slider

[ghost]

It doesn't seem that slider takes values with decimals.

I need to set values like 25.45 mm.

Could decimals be allowed?

Eg.

Sliding the thumb or pressing up/down arrow it will be stepping at 1.

When using the numeric keyboard we can set it to have decimals with a dot.

[toddparker]

You can use the step attribute on the range input to indicate that decimal values can be entered, by default whole numbers are accepted. You can also use this to snap to a larger value, like 20.

<input type="range" name="slider-1" id="slider-1" step="0.1" value="60" min="0" max="100" />

http://jsbin.com/ujizip/1/

This will impact the text input next to the slider, but if you set a step smaller than 1, the slider doesn't currently listen to small a step that and will continue to increment the value by 1. The reason for this is that sliders aren't good for such granular input due to constraints on width. For example, if you have a slider with an accepted range of 0-100 with 0.1 granularity, you'd need a slider that is 1,000 pixels wide to have a pixel for the slider handle to land on for each of those values.

Your example of 25.45 indicates a step of 0.01 or 0.05 and a range of at least 1-26. If 0.01, you'd need slider 2,600 pixels wide (26 x 100). If your step is 0.05, you'd need a slider 520 pixels wide (26 x 20). These widths aren't practical on mobile. Some platforms like WP7 don't support touch events so you need to tap the track which makes the sensitivity much worse - I'd bet a finger can only tap about 15 positions along the track.

If we allowed the handle to move by small increments, if would land at odd increments 0.0 > 0.3 > 0.6 > 0.9 > 1.2 (assuming ~300px width) which would make it annoying to use becaue it would land at odd values instead of whole numbers. Slider are imprecise input controls designed for quick, rough input for this reason.

It's possible we could accept that level of granularity if it "fit", but that is really messy and people would wonder why sometimes this worked and sometimes it didn't. For example, if you had a range of 1-10 with 0.1 step, that would fit ok at ~300px wide. But 1-50 wouldn't and what would we do then? We'd also need to adjust this as the browser width changed. It gets complex so we decided to keep it simple and accept a step of 1 or greater.

I'll tag this as a feature request and close it. Feel free to add this to the wiki page.

[ghost]

I totally agree with you.

A possible solution would be when sliding with our thumb it will step with a whole number. The only way to set decimals is using the up/down key/button on the text input or using the numeric keyboard directly.

How does this sound?

[toddparker]

Yep, that's exactly what happens in my demo page:
http://jsbin.com/ujizip/1/

The spinner behavior is browser-dependent but works as described in Chrome.