Contents
Is it possible to make a slider with two input values?
Is it possible to make a HTML5 slider with two input values, for example to select a price range? If so, how can it be done? No, the HTML5 range input only accepts one input. I would recommend you to use something like the jQuery UI range slider for that task.
Which is the default value for the range slider?
A value of all for step makes the slider register floating-point values, and is the finest level of control. The range input doesn’t present a numerical readout of its value by default. To remedy that, we use the element:
When to use a slider in a spreadsheet?
In fact, whenever the input is “fuzzy” or not precise, then a slider is probably the first option one would consider — for example, when the user must choose a down-payment range for a mortgage or a time range for an airport departure (i.e. earliest to latest).
Which is better a button or a slider?
A set of buttons is always an alternative for a slider, but a slider can help visualize options and put them in context quickly (for example, when selecting a skill level in a game). (Image: Petri Jääskeläinen) Sliders can be helpful in exploring and visualizing options quickly, but not when it comes to precise input.
Is it possible to use two sliders in HTML5?
Sure you can simply use two sliders overlaying each other and add a bit of javascript (actually not more than 5 lines) that the selectors are not exceeding the min/max values (like in @Garys) solution. Attached you’ll find a short snippet adapted from a current project including some CSS3 styling to show what you can do (webkit only).
Are there any downsides to using a slider?
The price is adjusted continually, and the slider is never blocked by changes in input. Minor downsides: Visual feedback when hovering over the track would help, and increasing the padding both for the thumb and the track would help. Also, it would be helpful to be able to tap on the current value and adjust it manually.