Horizontal Slider Example

Following is an example of a color picker that demonstrates the slider design pattern. Change the background color of the box below the picker by adjusting the sliders for red, green, and blue values. The HEX and RGB values of the chosen color are displayed by the color box.

Similar examples include:

Slider Examples with aria-orientation and aria-valuetext: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.

Example

Red

Green

Blue

Color Box

Color (HEX): Color (RGB):

Keyboard Support

Key	Function
`Right Arrow`	Increases slider value one step.
`Up Arrow`	Increases slider value one step.
`Left Arrow`	Decreases slider value one step.
`Down Arrow`	Decreases slider value one step.
`Page Up`	Increases slider value multiple steps. In this slider, jumps ten steps.
`Page Down`	Decreases slider value multiple steps. In this slider, jumps ten steps.
`Home`	Sets slider to its minimum value.
`End`	Sets slider to its maximum value.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`slider`		`div`	Identifies the element as a slider. Set on the `div` that represents as the movable thumb because it is the operable element that represents the slider value.
	`tabindex=0`	`div`	Includes the slider thumb in the page tab sequence.
	`aria-valuemax=255`	`div`	Specifies the maximum value of the slider.
	`aria-valuemin=0`	`div`	Specifies the minimum value of the slider.
	`aria-valuenow=NUMBER`	`div`	Indicates the current value of the slider.
	`aria-labelledby=IDREF`	`div`	Refers to the element containing the name of the slider.

Javascript and CSS Source Code

CSS: slider.css
Javascript: slider.js