The first two rows contains horizontal and vertical sliders created out of an <input type="range">
markup, so they accept keyboard input.
A slider made out of an input
element, can only display a rendered ruler.
In the last two rows you can see horizontal and vertical sliders created out of a <span>
markup, so they do not accept keyboard input by default. However, you can add a tabindex
attribute to the span
, to make it keyboard friendly.
A slider made out of a non input
element can either display a ruler or the original html content.
All of these sliders a range from -30 to 100.
fixed handle | single handle | double handle | ||||
---|---|---|---|---|---|---|
ruler | html content | ruler | html content | ruler | html content | |
type[range] horizontal | ||||||
type[range] vertical | ||||||
span horizontal | this is the original HTML content | this is the original HTML content | this is the original HTML content | this is the original HTML content | this is the original HTML content | this is the original HTML content |
span vertical |
0 1 2 3 4 5 6 7 8 9 |
0 1 2 3 4 5 6 7 8 9 |
0 1 2 3 4 5 6 7 8 9 |
0 1 2 3 4 5 6 7 8 9 |
0 1 2 3 4 5 6 7 8 9 |
0 1 2 3 4 5 6 7 8 9 |
display: none
if you need to show them.