-
Notifications
You must be signed in to change notification settings - Fork 355
/
slider-multithumb.html
276 lines (267 loc) · 13.2 KB
/
slider-multithumb.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Multi-Thumb Slider Example</title>
<!-- Core JS and CSS shared by all examples -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../../../shared/css/core.css">
<script src="../../../shared/js/examples.js"></script>
<script src="../../../shared/js/highlight.pack.js"></script>
<script src="../../../shared/js/app.js"></script>
<script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
<!-- JS and CSS for this example -->
<link rel="stylesheet" href="css/slider-multithumb.css">
<script src="js/slider-multithumb.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
<ul>
<li><a href="https://github.com/orgs/w3c/projects/124">Related Issues</a></li>
<li><a href="../slider-multithumb-pattern.html">Design Pattern</a></li>
</ul>
</nav>
<main>
<h1>Horizontal Multi-Thumb Slider Example</h1>
<section>
<h2>About This Example</h2>
<div class="advisement">
<h3>Warning!</h3>
<p>
Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output.
To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events.
This is a new convention that may not be fully implemented by some assistive technologies.
Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
</p>
</div>
<img alt="" class="example-page-example-icon" src="../../../images/pattern-slider-multithumb.svg">
<p>
The following example of the <a href="../slider-multithumb-pattern.html">Multi-Thumb Slider Pattern</a> demonstrates an input for setting a pair of values that represent a range.
This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.
</p>
<p>Similar examples include:</p>
<ul>
<li><a href="../../slider/examples/slider-color-viewer.html">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
<li><a href="../../slider/examples/slider-temperature.html">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
<li><a href="../../slider/examples/slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
<li><a href="../../slider/examples/slider-seek.html">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
</ul>
</section>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<h3>Hotel Price Range (in <abbr title="United States Dollars">USD</abbr>)</h3>
<div class="slider-multithumb">
<svg role="none" class="slider-group" width="360" height="60">
<g aria-hidden="true" class="rail">
<rect height="0" width="0" />
</g>
<g aria-hidden="true" class="range">
<rect height="0" width="0" />
</g>
<g class="minimum" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="250" aria-label="Hotel Minimum Price in US dollars">
<text class="value">0</text>
<rect class="focus-ring" height="0" width="0" />
<polygon class="thumb" points="0,0 0,0" />
</g>
<g class="maximum" role="slider" tabindex="0" aria-valuemin="100" aria-valuenow="250" aria-valuemax="400" aria-label="Hotel Maximum Price in US dollars">
<text class="value">0</text>
<rect class="focus-ring" height="0" width="0" />
<polygon class="thumb" points="0,0 0,0" />
</g>
</svg>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2>Accessibility Features</h2>
<ul>
<li>The display of the slider's current value remains adjacent to the thumb as the thumb is moved, so people with a small field of view (e.g., due to magnification) can easily see the value while focusing on the thumb as they move it.</li>
<li>To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.</li>
<li>
To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
For example, the color of the focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of the inline SVG <code>rect</code> element used to draw the focus ring border.
To make the background of the <code>rect</code> match the high contrast background color, the <code>fill-opacity</code> attribute of the <code>rect</code> is set to zero.
If specific colors were instead used to specify the <code>stroke</code> and <code>fill</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.<br>
Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast mode.
Some browsers do not use <code>auto</code> for the default value.
</li>
</ul>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr data-test-id="key-right-arrow">
<th><kbd>Right Arrow</kbd></th>
<td>Increases slider value one step.</td>
</tr>
<tr data-test-id="key-up-arrow">
<th><kbd>Up Arrow</kbd></th>
<td>Increases slider value one step.</td>
</tr>
<tr data-test-id="key-left-arrow">
<th><kbd>Left Arrow</kbd></th>
<td>Decreases slider value one step.</td>
</tr>
<tr data-test-id="key-down-arrow">
<th><kbd>Down Arrow</kbd></th>
<td>Decreases slider value one step.</td>
</tr>
<tr data-test-id="key-page-up">
<th><kbd>Page Up</kbd></th>
<td>
Increases slider value multiple steps.
In this slider, jumps ten steps.
</td>
</tr>
<tr data-test-id="key-page-down">
<th><kbd>Page Down</kbd></th>
<td>
Decreases slider value multiple steps.
In this slider, jumps ten steps.
</td>
</tr>
<tr data-test-id="key-home">
<th><kbd>Home</kbd></th>
<td>Sets slider to its minimum value.</td>
</tr>
<tr data-test-id="key-end">
<th><kbd>End</kbd></th>
<td>Sets slider to its maximum value.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="svg-none">
<th scope="row">
<code>none</code>
</th>
<td></td>
<td>
<code>svg</code>
</td>
<td>The use of the <code>none</code> role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.</td>
</tr>
<tr data-test-id="slider-role">
<th scope="row">
<code>slider</code>
</th>
<td></td>
<td>
<code>g</code>
</td>
<td>
<ul>
<li>Identifies the <code>img</code> element as a slider.</li>
<li>Set on the movable thumb because it is the operable element that receives focus and represents the slider value.</li>
</ul>
</td>
</tr>
<tr data-test-id="tabindex">
<td></td>
<th scope="row">
<code>tabindex=<q>0</q></code>
</th>
<td>
<code>g</code>
</td>
<td>Includes the slider thumb in the page tab sequence.</td>
</tr>
<tr data-test-id="aria-valuemax">
<td></td>
<th scope="row">
<code>aria-valuemax=<q>NUMBER</q></code>
</th>
<td>
<code>g</code>
</td>
<td>Specifies the maximum value of the slider.</td>
</tr>
<tr data-test-id="aria-valuemin">
<td></td>
<th scope="row">
<code>aria-valuemin=<q>NUMBER</q></code>
</th>
<td>
<code>g</code>
</td>
<td>Specifies the minimum value of the slider.</td>
</tr>
<tr data-test-id="aria-valuenow">
<td></td>
<th scope="row">
<code>aria-valuenow=<q>NUMBER</q></code>
</th>
<td>
<code>g</code>
</td>
<td>Indicates the current value of the slider.</td>
</tr>
<tr data-test-id="aria-label">
<td></td>
<th scope="row">
<code>aria-label=<q>text</q></code>
</th>
<td>
<code>g</code>
</td>
<td>A label identifying the purpose of the slider, e.g., <q>Hotel Minimum Price</q>.</td>
</tr>
<tr data-test-id="aria-hidden-g">
<td></td>
<th scope="row">
<code>aria-hidden=<q>true</q></code>
</th>
<td>
<code>g</code>
</td>
<td>Removes the SVG <code>g</code> element from the accessibility tree to prevent assistive technologies from presenting it as an image separate from the slider.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>JavaScript and CSS Source Code</h2>
<ul id="css_js_files">
<li>CSS: <a href="css/slider-multithumb.css" type="tex/css">slider-multithumb.css</a></li>
<li>Javascript: <a href="js/slider-multithumb.js" type="text/javascript">slider-multithumb.js</a></li>
</ul>
</section>
<section class="example-code">
<h2 id="sc1_label">HTML Source Code</h2>
<p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
sourceCode.make();
</script>
</section>
</main>
</body>
</html>