Slider
Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
Horizontal Slider Example
initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately
20%
40%
60%
80%
-
+
lowest
normal
highest
Slider1 Value:
●
Disable previous slider
●
Enable previous slider
Vertical Slider Example
initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away
+
0
100
20
40
60
80
-
Slider2 Value:
Fancy HTML labels (no slide animation):
-
+
small
medium
large
Standalone ruler example:
1
2
Horizontal, with buttons, disabled (to show styling):
0.00%
16.67%
33.33%
50.00%
66.67%
83.33%
100.00%
-
+
lowest
normal
highest
view data
Fractional Slider Example
initial value=0.28, min=0, max=2, onChange event triggers input box value change when you mouse up or tab away
-
+
Fractional Slider Value: