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
<div class="example">
<div class="aria-widget-vertical-slider">
<div class="label">
Temperature
</div>
<div class="value">
0
</div>
<div class="rail" style="height: 200px">
<div role="slider"
class="thumb"
aria-valuemin="50"
aria-valuenow="68"
aria-valuemax="100"
aria-labelledby="idTemp">
</div>
</div>
</div>
Fan/Heat Sliders
- CSS: text-slider.css
- Javascript: text-slider.js
<div class="example">
<div class="aria-widget-text-slider">
<div class="label">
Fan
</div>
<div class="rail" style="width: 160px">
<div role="slider"
class="thumb"
aria-valuemin="0"
aria-valuenow="0"
aria-valuemax="3"
aria-valuetext="Off"
aria-labelledby="idFan"
aria-orientation="horizontal">
<div class="value">
Off
</div>
<div class="value">
Low
</div>
<div class="value">
High
</div>
<div class="value">
Auto
</div>
</div>
</div>
<div class="aria-widget-text-slider">
<div class="label">
Heat/Cool
</div>
<div class="rail" style="width: 120px">
<div role="slider"
class="thumb"
aria-valuemin="0"
aria-valuenow="0"
aria-valuemax="2"
aria-valuetext="Off"
aria-labelledby="idHeat"
aria-orientation="horizontal">
<div class="value">
Off
</div>
<div class="value">
Heat
</div>
<div class="value">
Cool
</div>
</div>
</div>
</div>