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
Green
Blue
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
- CSS: slider.css
- Javascript: slider.js