Color Picker Using Slider Widgets

Change sliders to update the background color of box (note: the box is visually left of the 3 slider controls), with the HEX color value in a form control.

Horizontal Sliders

Red
0
Green
0
Blue
0

Color Box

Keyboard Support

Key Function
Right and Up Arrow Increase slide value by increment value
Left and Down Arrow Decrease slide value by increment value
Page Up Arrow Increase slide value by jump value
Page Down Arrow Decrease slide value by jump value
Home Set slider to minimum value
End Set slider to maximum value

ARIA Roles, Properties and States

Role Property/State Component Usage
slider thumb Identify the widget as a slider
aria-valuemax thumb Maximum value of the slider
aria-valuemin thumb Minimum value of the slider
aria-valuenow thumb Current value of the slider
aria-labelledby thumb Reference to define a unique descriptive accessible name for each slider widget

Source Code