Aria Slider Examples - the Paciello Group

This page contains several examples involving the TPG slider. Note that these sliders do not perform any action, and their labels are just examples.

Read the associated article

Basic Sliders

Using a text input element

Using a select element

Focus Placement

Thumb is Focusable

rail is focusable


To see the different scaling effects, increase your browser's text size. In Firefox, use the 'CTRL +(plus)' shortcut. In Internet Explorer the text size can be changed under 'view > text size' in the browser menu.

Fixed width, fixed height

Fixed width, relative height

Relative width, relative height

Vertical Slider

Using custom limits