Aria Slider Examples - the Paciello Group

Basic sliders

Using a text input element

Volume

Using a select element

Food Quality terrible bad decent good excellent

Focus Placement

Thumb is Focusable

Filesize

rail is focusable

The staff was helpful Strongly disagree Disagree Neutral Agree Strongly agree

scaling

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

Red

Fixed width, relative height

Green

Relative width, relative height

Blue

Vertical Slider

Minimum Filesize