forked from freqdec/fd-slider
/
index.html
205 lines (193 loc) · 11 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
<!DOCTYPE html>
<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" />
<!--[if IE]><![endif]-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider-ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider-ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/fd-slider-ie8.css" />
<![endif]-->
<script src="./js/fd-slider.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 it’s minimum value and the <kbd title="End key">End</kbd> key to set the slider at it’s 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>
<!--
Sliders #1, #2 & #3 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
-->
<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="" />
<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>
<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 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>
<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="" />
<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>
</fieldset>
<!--
Sliders created using the Javascript API from here on in...
-->
<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 wil 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 an input
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>
<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 percentage markers possible, I'm just using one for the demo
scale:{
// At 50% of the slider width, 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>
<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
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>
<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 a 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 in height
classNames:"v-s2"
});
</script>
</fieldset>
</form>
</div>
</body>
</html>