Semantics
An input where the user selects a value from within a given range.
Additional info from the ARIA specification
A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add to or subtract from the current value by using directional keys such as arrow keys.
Authors MAY set the aria-valuemin and aria-valuemax attributes. Otherwise, their implicit values follow the same rules as <input type=" in HTML:range">
Authors MUST set the aria-valuenow attribute. If aria-valuenow is missing or has an unexpected value, browsers MAY implement the repair techniques specified in the section describing handling author errors in states and properties, which are equivalent to the repair techniques for <input type=" in HTML.range">
Elements with the role slider have an implicit aria-orientation value of horizontal.
Abstract Role
WidgetRepresents a focusable, interactive element.
Content Categories
Phrasing ContentAn element that typically appears inline and provides semantic meaning to text content.
Allowed Descendants
Phrasing Children Allowed
Note
Children Become Presentational
Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.
Usage
Allowed HTML elements
Implicit semantics
These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.
input[type=range]
Explicitly allowed
img[role=slider]
Elements that can have any role
abbr[role=slider]address[role=slider]b[role=slider]blockquote[role=slider]canvas[role=slider]cite[role=slider]code[role=slider]custom-element[role=slider]data[role=slider]del[role=slider]dfn[role=slider]div[role=slider]em[role=slider]figure[role=slider]i[role=slider]ins[role=slider]kbd[role=slider]mark[role=slider]output[role=slider]p[role=slider]pre[role=slider]q[role=slider]samp[role=slider]small[role=slider]span[role=slider]table[role=slider]tbody[role=slider]tfoot[role=slider]thead[role=slider]time[role=slider]u[role=slider]var[role=slider]