Slider Widget Demo

This page demos the three types of slider widgets, with slightly different behaviours.
TypeRangeonDragMoveonDragEndonClickreversed
vertical1..9 update text fieldupdate text fieldyes
horizontal-10..10update text field update text fieldno
box0..10 update text field X:yes
Y:no
Red, blue, and green borders shown to test the correct placement of slider components.
[before]
[after]
[before]
[after]
[before]
[after]

Horizontal Slider Value: (updates when slider handle is moved)
Vertical Slider Value: (updates when slider handle drag ends)
Box Slider Value:

Debug Messages