forked from freqdec/fd-slider
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (305 loc) · 15.7 KB
/
index.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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!doctype html>
<!--
The script automatically adds the class "oldie" to the html element in IE < 9
-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>frequency decoder - accessible, unobtrusive slider/HTML5 polyfill script demo</title>
<meta name="author" content="frequency decoder" />
<meta name="description" content="An accessible, unobtrusive Slider/HTML5 Input Range polyfill script" />
<meta http-equiv="imagetoolbar" content="no" />
<!--
I'm using a CSS file generated specifically for use on my server. Please
generate a file for your own project using:
http://www.frequency-decoder.com/demo/fd-slider/css-generator/
-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.mhtml.min.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />
<script src="./js/fd-slider.min.js"></script>
</head>
<body>
<div id="article-wrapper">
<form action="" method="post">
<h1>Accessible, Unobtrusive “Slider/HTML5 range polyfill” Demo</h1>
<h2>Keyboard Controls</h2>
<!--
The following paragraph is used to set the ARIA describedby property
-->
<p id="fd-slider-describedby">Whenever a slider has focus, the keys <kbd title="Left arrow key">←</kbd>, <kbd title="Right arrow key">→</kbd>, <kbd title="Up arrow key">↑</kbd>, <kbd title="Down arrow key">↓</kbd>, <kbd title="Insert key">Ins</kbd> and <kbd title="Delete key">Del</kbd> can be used to control the slider handle (pressing either the <kbd>Page up</kbd> or <kbd>Page down</kbd> keys or <kbd title="CTRL key">CTRL</kbd> and an arrow key will move the handle by two steps at a time), the <kbd title="Home key">Home</kbd> key to set the slider at the minimum value and the <kbd title="End key">End</kbd> key to set the slider at the maximum value.</p>
<h2>Mixed HTML5 Polyfill & Javascript API Creation Demos</h2>
<h3>…as usual, “View Source” is your friend</h3>
<fieldset>
<legend>HTML5 input type="range" polyfill tests</legend>
<p>When the <code>window.onload</code> event fires, the following input elements will be automatically converted into sliders <em>only</em> if the browser does not recognise the HTML5 input “range” state.</p>
<p>See the <a href="./yepnope/">Modernizr/yepnope</a> demo for a better example on how to include the CSS and JS files when using the polyfill.</p>
<!--
Sliders #1, #2 #3 & #4 created automatically by the script on page load
only if the browser does not support type="range".
The script will use the "min", "max" and "step" attributes assigned to the
input to create the slider with the appropriate scale.
Slider #1: "min", "max" & "step" attributes given
-->
<pre><code><input type="range"
name="html5shim-1"
id="html5shim-1"
min="-10"
max="10"
step="0.20"
value="8.2"
title="Range: -10 to 10 in steps of 0.2" /></code></pre>
<label for="html5shim-1">Range: -10 to 10 in steps of 0.2</label>
<p>
<input name="html5shim-1" id="html5shim-1" type="range" min="-10" max="10" step="0.20" title="Range: -10 to 10 in steps of 0.2" value="8.2" />
<a href="#" onclick="document.getElementById('html5shim-1').stepUp(); return false;"><code>stepUp()</code></a> or
<a href="#" onclick="document.getElementById('html5shim-1').stepDown(); return false;"><code>stepDown()</code></a>
</p>
<!--
Slider #2: No "min" or "max" attributes given (they default to 0 and 100
respectivey) but the required "step" attribute set to "1".
Additionally, an onchange event has been set to test if the script honours
HTML events set on the original Input.
-->
<p>The following Input has an <code>onchange</code> event that updates the value of a <code>span</code> positioned within the associated <code>label</code>.</p>
<pre><code><input type="range"
name="html5shim-2"
id="html5shim-2"
step="1"
value="75"
title="Range: 0 to 100 in steps of 1" /></code></pre>
<label for="html5shim-2">Range: 0 to 100 in steps of 1 <span id="html5shim-2-out"></span></label>
<p>
<input name="html5shim-2" id="html5shim-2" type="range" step="1" title="Range: 0 to 100 in steps of 1" value="75" />
<a href="#" onclick="document.getElementById('html5shim-2').stepUp(); return false;"><code>stepUp()</code></a> or
<a href="#" onclick="document.getElementById('html5shim-2').stepDown(); return false;"><code>stepDown()</code></a>
</p>
<script>
// Add an onchange event to the input element that updates a span with the
// input value
fdSlider.addEvent(document.getElementById("html5shim-2"), "change", function(e) {
document.getElementById("html5shim-2-out").innerHTML = "(Current Value: " + document.getElementById("html5shim-2").value + ")";
});
</script>
<!--
Slider #3: The input element has been given the "data-fd-slider-vertical"
custom data- attribute which makes the script create a vertical slider.
Additionally, the value of this attribute is given to the slider as a
classname - in this case, the class "v-s" which makes the slider inherit
a height of 300px.
-->
<p>The following input element has been assigned a custom data- attribute named <code>data-fd-slider-vertical</code> which tells the script to create a vertical slider.
Additionally, the value of the <code>data-fd-slider-vertical</code> attribute, in this case “v-s”, is added as a classname to the associated slider – this enables you set the slider height using a CSS classname (which, in this case, sets a height of 300 pixels).</p>
<pre><code><input type="range"
name="html5shim-3"
id="html5shim-3"
data-fd-slider-vertical="v-s"
min="100"
max="0"
step="1"
value="50"
title="Range: 100 to 0 in steps of 1" />
<style>.v-s { height:300px }</style></code></pre>
</code></pre>
<label for="html5shim-3">Range: 100 to 0 in steps of 1</label>
<p>
<input name="html5shim-3" id="html5shim-3" data-fd-slider-vertical="v-s" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="50" />
<a href="#" onclick="document.getElementById('html5shim-3').stepUp(); return false;"><code>stepUp()</code></a>
<a href="#" onclick="document.getElementById('html5shim-3').stepDown(); return false;"><code>stepDown()</code></a>
</p>
<!--
Slider #4: CSS has been used to make the following input element 400
pixels in height and 20 pixels wide, which instructs the script to
automatically create a vertical slider.
-->
<p>CSS has been used to make the following input element 400 pixels in height and 20 pixels wide, which instructs the script to create a vertical slider.</p>
<pre><code><input type="range"
name="html5shim-4"
id="html5shim-4"
min="100"
max="0"
step="1"
value="50"
title="Range: 100 to 0 in steps of 1" />
<style>#html5shim-4 { height:400px }</style></code></pre>
<label for="html5shim-4">Range: 100 to 0 in steps of 1</label>
<p>
<input name="html5shim-4" id="html5shim-4" type="range" min="100" max="0" step="1" title="Range: 100 to 0 in steps of 1" value="50" />
<a href="#" onclick="document.getElementById('html5shim-4').stepUp(); return false;"><code>stepUp()</code></a>
<a href="#" onclick="document.getElementById('html5shim-4').stepDown(); return false;"><code>stepDown()</code></a>
</p>
</fieldset>
<!--
Sliders created using the Javascript API from here on in i.e. no more HTML5
range polyfills from this point on.
-->
<fieldset>
<legend>Javascript initialisation tests</legend>
<p>The first three sliders show the three different “handle to clickpoint” animation styles: <em>timed</em>, <em>jump</em> <span class="amp">&</span> <em>tween</em> respectively. Additionally, the third slider has the “forceValue” parameter set to TRUE.</p>
<label for="inputTest3">Range: -10 to 10 in steps of 0.5</label>
<p>
<!--
Here's the form element we will associate the first slider with.
-->
<input name="inputTest3" id="inputTest3" type="text" title="Range: -10 to 10 in steps of 0.5" value="" maxlength="6" />
<a href="#" onclick="fdSlider.disable('inputTest3'); return false;">Disable</a>
<a href="#" onclick="fdSlider.enable('inputTest3'); return false;">Enable</a>
</p>
<script>
// Call the fdSlider.createSlider method, passing in the required options
fdSlider.createSlider({
// Associate the form element
inp:document.getElementById("inputTest3"),
// Declare a step (quoting the value means the precision will be
// calculated as 2 decimal points e.g. the "50" part of "0.50") which is
// a short-cut way of setting the precision without actually using the
// "precision" parameter
step:"0.50",
// Declare a maxStep (for keyboard users)
maxStep:2,
// Min & Max values
min:-10,
max:10,
// Use the "timed increments to click point" animation
animation:"timed"
});
</script>
<p>The following slider has a 50:13 scale set, which means that when the drag handle is at the 50% mark, then the slider value should be 13.</p>
<label for="inputTest5">Range: 5 to 15 in steps of 0.2 with a (50:13) scale</label>
<p>
<!--
Here's the form element we will associate the second slider with.
-->
<input name="inputTest5" id="inputTest5" type="text" title="Range: 5 to 15 in steps of 0.2 with a (50:13) scale" value="" maxlength="6" />
</p>
<script>
fdSlider.createSlider({
// Associate an input
inp:document.getElementById("inputTest5"),
// Declare a step
step:0.2,
// Declare a maxStep (for keyboard users)
maxStep:0.4,
// Min value
min:5,
// Max value
max:15,
// Define a scale (multiple points supported, I'm just using one for the
// demo)
scale:{
// At 50% of the slider scale, the value should be 13
"50":"13"
},
// Use the "jump to click point" animation
animation:"jump"
});
</script>
<p>The following slider has the “forceValue” parameter set to TRUE, which forces the associated text input to show a valid value.</p>
<label for="inputTest6" id="inputTest6Label">Range: 5 to 15 in steps of 0.2</label>
<p>
<!--
Here's the form element we will associate the third slider with.
-->
<input name="inputTest6" id="inputTest6" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
</p>
<script>
fdSlider.createSlider({
// Associate an input
inp:document.getElementById("inputTest6"),
// Declare a step
step:0.2,
// Declare a maxStep (for keyboard users)
maxStep:0.4,
// Min value
min:5,
// Max value
max:15,
// Use the "tween to click point" animation
animation:"tween",
// Force the associated input to have a valid value
forceValue:true
});
</script>
<p>The following slider has been associated with a <code><select></code>.</p>
<label for="selectTest1" id="selectTest1Label">Select List with eight options</label>
<p>
<!--
Here's the form element - a select list in this case - that we will
associate the forth and final slider with.
-->
<select name="selectTest1" id="selectTest1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="4">Four</option>
<option value="8">Eight</option>
<option value="16">Sixteen</option>
<option value="32">Thirty Two</option>
<option value="64">Sixty Four</option>
<option value="128">One Hundred and Twenty Eight</option>
<option value="256">Two Hundred and Fifty Six</option>
</select>
<a href="#" onclick="fdSlider.disable('selectTest1'); return false;">Disable</a>
<a href="#" onclick="fdSlider.enable('selectTest1'); return false;">Enable</a>
</p>
<script>
fdSlider.createSlider({
// Associate the select list
inp:document.getElementById("selectTest1"),
// Use the tween animation
animation:"tween",
// Keep the form element, in this case a select list, visible
hideInput:false,
// Create a vertical slider
vertical:true,
// Give it the className "v-s2" which will make the slider 160px high
classNames:"v-s2"
});
</script>
</fieldset>
<fieldset>
<legend>Dynamic Creation</legend>
<div id="corral">
<input name="dyn-1" id="dyn-1" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
</div>
<button onclick="createNewSlider(); return false;">Create New slider</button>
<script>
// A quick & dirty function to create sliders dynamically
function createNewSlider() {
var id = "dyn-" + createNewSlider.idCnt,
// Check input element exists already
inpChk = document.getElementById(id),
// Create new input element if needs be
newInp = inpChk ? inpChk : document.createElement("input");
createNewSlider.idCnt++;
// Set attributes and add to DOM if needs be
if(!inpChk) {
newInp.type = "text";
newInp.id = id;
newInp.name = id;
newInp.maxlength = 6;
newInp.title = "Range: 5 to 15 in steps of 0.2";
document.getElementById("corral").appendChild(newInp);
};
// Create and associate a slider with the input element
fdSlider.createSlider({
// Associate the select list
inp:newInp,
// Use the tween animation
animation:"tween",
// Keep the form element hidden
hideInput:true,
// Set min, max and step
max:15,
min:5,
step:0.2
});
};
createNewSlider.idCnt = 1;
// Call the function immediately to convert the input element already present
// within the HTML markup
createNewSlider();
</script>
</fieldset>
</form>
</div>
</body>
</html>