Thermostat Simulation

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 Examples

Temperature
0

Horizontal Slider Examples

Fan
Off
Low
High
Auto
Heat/Cool
Off
Heat
Cool

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

Fan/Heat Sliders