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:

Example

Red
0
Green
0
Blue
0

Color Box

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

HTML Source Code