The following table is a testbed for some possible combinations of sliders.

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.

Scroll down below to test all sliders.
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
Apply the range to all sliders with rulers
Note that the sliders with html content also have ranges defined. They don't appear simply because they are hidden by css. You can remove the display: none if you need to show them.
The "between" range is only applicable to double sliders.
You can drag the [30, 80], [-20, 0] and "between" ranges to a different location (only applicable to the single and double handle sliders).
Set the value of to all fixed and single handle sliders
Set the value of to all double handle sliders
You canandall sliders