Thermostat Controls using ARIA Sliders
Change sliders to set values for setting a vertical temperature, fan speed and heat/air conditioning. The examples also use aria-valuetext property.
Vertical Slider Example
Slider Examples using using aria-valuetext
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 (temperature slider only) |
Increase slide value by jump value |
| Page Down Arrow (temperature slider only) |
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-orientation | thumb | Indicates the orientation of the slider is "vertical" for the temperature slider or "horizontal" for the fan and temperature controls | |
| 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-valuetext | thumb | The value of the temperature slider appended with the text "degrees" or one of the text values | |
| aria-labelledby | thumb | Reference to define a unique descriptive accessible name for each slider widget |
Source Code
Temperature Slider
- CSS: vertical-slider.css
- Javascript: vertical-slider.js
Fan/Heat Sliders
- CSS: text-slider.css
- Javascript: text-slider.js