Skip to content
Newer
Older
100644 341 lines (304 sloc) 15.3 KB
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
1 <!doctype html>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
2 <!--
3
4 The script automatically adds the class "oldie" to the html element in IE < 9
5
6 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
7 <html lang="en">
8 <head>
9 <meta charset="utf-8" />
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
10 <title>frequency decoder - accessible, unobtrusive slider/HTML5 polyfill script demo</title>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
11 <meta name="author" content="frequency decoder" />
12 <meta name="description" content="An accessible, unobtrusive Slider/HTML5 Input Range polyfill script" />
13 <meta http-equiv="imagetoolbar" content="no" />
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
14 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
15
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
16 I'm using a CSS file generated specifically for use on my server. Please
17 generate a file for your own project using:
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
18
19 http://www.frequency-decoder.com/demo/fd-slider/css-generator/
20
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
21 -->
22 <link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.frequency-decoder.com/demo/fd-slider/css/fd-slider.mhtml.min.css" />
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
23 <link rel="stylesheet" type="text/css" media="screen, projection" href="./css/demo.css" />
1545b5d @freqdec Added the userSet to callback & .mht file
authored Mar 29, 2012
24 <script src="./js/fd-slider.min.js"></script>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
25 </head>
26 <body>
27 <div id="article-wrapper">
28 <form action="" method="post">
29 <h1>Accessible, Unobtrusive &#8220;Slider/HTML5 range polyfill&#8221; Demo</h1>
30 <h2>Keyboard Controls</h2>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
31 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
32
33 The following paragraph is used to set the ARIA describedby property
34
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
35 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
36 <p id="fd-slider-describedby">Whenever a slider has focus, the keys <kbd title="Left arrow key">&larr;</kbd>, <kbd title="Right arrow key">&rarr;</kbd>, <kbd title="Up arrow key">&uarr;</kbd>, <kbd title="Down arrow key">&darr;</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>
37 <h2>Mixed HTML5 Polyfill &amp; Javascript API Creation Demos</h2>
38 <h3>&#8230;as usual, &#8220;View Source&#8221; is your friend</h3>
39
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
40 <fieldset>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
41 <legend>HTML5 input type="range" polyfill tests</legend>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
42 <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 &#8220;range&#8221; state.</p>
43 <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>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
44 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
45
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
46 Sliders #1, #2 #3 & #4 created automatically by the script on page load
47 only if the browser does not support type="range".
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
48
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
49 The script will use the "min", "max" and "step" attributes assigned to the
50 input to create the slider with the appropriate scale.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
51
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
52 Slider #1: "min", "max" & "step" attributes given
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
53
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
54 -->
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
55 <pre><code>&lt;input type="range"
56 name="html5shim-1"
57 id="html5shim-1"
58 min="-10"
59 max="10"
60 step="0.20"
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
61 value="8.2"
62 title="Range: -10 to 10 in steps of 0.2" /&gt;</code></pre>
63
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
64 <label for="html5shim-1">Range: -10 to 10 in steps of 0.2</label>
65 <p>
66 <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" />
67 <a href="#" onclick="document.getElementById('html5shim-1').stepUp(); return false;"><code>stepUp()</code></a> or
68 <a href="#" onclick="document.getElementById('html5shim-1').stepDown(); return false;"><code>stepDown()</code></a>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
69 </p>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
70 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
71
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
72 Slider #2: No "min" or "max" attributes given (they default to 0 and 100
73 respectivey) but the required "step" attribute set to "1".
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
74
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
75 Additionally, an onchange event has been set to test if the script honours
76 HTML events set on the original Input.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
77
78 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
79 <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>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
80 <pre><code>&lt;input type="range"
81 name="html5shim-2"
82 id="html5shim-2"
83 step="1"
84 value="75"
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
85 title="Range: 0 to 100 in steps of 1" /&gt;</code></pre>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
86 <label for="html5shim-2">Range: 0 to 100 in steps of 1 <span id="html5shim-2-out"></span></label>
87 <p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
88 <input name="html5shim-2" id="html5shim-2" type="range" step="1" title="Range: 0 to 100 in steps of 1" value="75" />
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
89 <a href="#" onclick="document.getElementById('html5shim-2').stepUp(); return false;"><code>stepUp()</code></a> or
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
90 <a href="#" onclick="document.getElementById('html5shim-2').stepDown(); return false;"><code>stepDown()</code></a>
91 </p>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
92 <script>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
93 // Add an onchange event to the input element that updates a span with the
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
94 // input value
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
95 fdSlider.addEvent(document.getElementById("html5shim-2"), "change", function(e) {
96 document.getElementById("html5shim-2-out").innerHTML = "(Current Value: " + document.getElementById("html5shim-2").value + ")";
97 });
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
98 </script>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
99 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
100
101 Slider #3: The input element has been given the "data-fd-slider-vertical"
102 custom data- attribute which makes the script create a vertical slider.
103 Additionally, the value of this attribute is given to the slider as a
104 classname - in this case, the class "v-s" which makes the slider inherit
105 a height of 300px.
106
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
107 -->
108 <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.
109 Additionally, the value of the <code>data-fd-slider-vertical</code> attribute, in this case &#8220;v-s&#8221;, is added as a classname to the associated slider &ndash; this enables you set the slider height using a CSS classname (which, in this case, sets a height of 300 pixels).</p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
110 <pre><code>&lt;input type="range"
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
111 name="html5shim-3"
112 id="html5shim-3"
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
113 data-fd-slider-vertical="v-s"
114 min="100"
115 max="0"
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
116 step="1"
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
117 value="50"
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
118 title="Range: 100 to 0 in steps of 1" /&gt;
119 &lt;style&gt;.v-s { height:300px }&lt;/style&gt;</code></pre>
120 </code></pre>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
121 <label for="html5shim-3">Range: 100 to 0 in steps of 1</label>
122 <p>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
123 <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" />
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
124 <a href="#" onclick="document.getElementById('html5shim-3').stepUp(); return false;"><code>stepUp()</code></a>
125 <a href="#" onclick="document.getElementById('html5shim-3').stepDown(); return false;"><code>stepDown()</code></a>
126 </p>
127 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
128
129 Slider #4: CSS has been used to make the following input element 400
130 pixels in height and 20 pixels wide, which instructs the script to
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
131 automatically create a vertical slider.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
132
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
133 -->
134 <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>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
135 <pre><code>&lt;input type="range"
136 name="html5shim-4"
137 id="html5shim-4"
138 min="100"
139 max="0"
140 step="1"
141 value="50"
142 title="Range: 100 to 0 in steps of 1" /&gt;
143 &lt;style&gt;#html5shim-4 { height:400px }&lt;/style&gt;</code></pre>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
144 <label for="html5shim-4">Range: 100 to 0 in steps of 1</label>
145 <p>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
146 <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" />
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
147 <a href="#" onclick="document.getElementById('html5shim-4').stepUp(); return false;"><code>stepUp()</code></a>
148 <a href="#" onclick="document.getElementById('html5shim-4').stepDown(); return false;"><code>stepDown()</code></a>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
149 </p>
150 </fieldset>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
151 <!--
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
152
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
153 Sliders created using the Javascript API from here on in i.e. no more HTML5
154 range polyfills from this point on.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
155
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
156 -->
157 <fieldset>
158 <legend>Javascript initialisation tests</legend>
159 <p>The first three sliders show the three different &#8220;handle to clickpoint&#8221; animation styles: <em>timed</em>, <em>jump</em> <span class="amp">&</span> <em>tween</em> respectively. Additionally, the third slider has the &#8220;forceValue&#8221; parameter set to TRUE.</p>
160 <label for="inputTest3">Range: -10 to 10 in steps of 0.5</label>
161 <p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
162 <!--
163
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
164 Here's the form element we will associate the first slider with.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
165
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
166 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
167 <input name="inputTest3" id="inputTest3" type="text" title="Range: -10 to 10 in steps of 0.5" value="" maxlength="6" />
168 <a href="#" onclick="fdSlider.disable('inputTest3'); return false;">Disable</a>
169 <a href="#" onclick="fdSlider.enable('inputTest3'); return false;">Enable</a>
170 </p>
171 <script>
172 // Call the fdSlider.createSlider method, passing in the required options
173 fdSlider.createSlider({
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
174 // Associate the form element
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
175 inp:document.getElementById("inputTest3"),
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
176 // Declare a step (quoting the value means the precision will be
177 // calculated as 2 decimal points e.g. the "50" part of "0.50") which is
178 // a short-cut way of setting the precision without actually using the
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
179 // "precision" parameter
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
180 step:"0.50",
181 // Declare a maxStep (for keyboard users)
182 maxStep:2,
183 // Min & Max values
184 min:-10,
185 max:10,
186 // Use the "timed increments to click point" animation
187 animation:"timed"
188 });
189 </script>
190 <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>
191 <label for="inputTest5">Range: 5 to 15 in steps of 0.2 with a (50:13) scale</label>
192 <p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
193 <!--
194
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
195 Here's the form element we will associate the second slider with.
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
196
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
197 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
198 <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" />
199 </p>
200 <script>
201 fdSlider.createSlider({
202 // Associate an input
203 inp:document.getElementById("inputTest5"),
204 // Declare a step
205 step:0.2,
206 // Declare a maxStep (for keyboard users)
207 maxStep:0.4,
208 // Min value
209 min:5,
210 // Max value
211 max:15,
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
212 // Define a scale (multiple points supported, I'm just using one for the
213 // demo)
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
214 scale:{
215 // At 50% of the slider scale, the value should be 13
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
216 "50":"13"
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
217 },
218 // Use the "jump to click point" animation
219 animation:"jump"
220 });
221 </script>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
222 <p>The following slider has the &#8220;forceValue&#8221; parameter set to TRUE, which forces the associated text input to show a valid value.</p>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
223 <label for="inputTest6" id="inputTest6Label">Range: 5 to 15 in steps of 0.2</label>
224 <p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
225 <!--
226
227 Here's the form element we will associate the third slider with.
228
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
229 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
230 <input name="inputTest6" id="inputTest6" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
231 </p>
232 <script>
233 fdSlider.createSlider({
234 // Associate an input
235 inp:document.getElementById("inputTest6"),
236 // Declare a step
237 step:0.2,
238 // Declare a maxStep (for keyboard users)
239 maxStep:0.4,
240 // Min value
241 min:5,
242 // Max value
243 max:15,
244 // Use the "tween to click point" animation
245 animation:"tween",
246 // Force the associated input to have a valid value
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
247 forceValue:true
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
248 });
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
249 </script>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
250 <p>The following slider has been associated with a <code>&lt;select&gt;</code>.</p>
251 <label for="selectTest1" id="selectTest1Label">Select List with eight options</label>
252 <p>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
253 <!--
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
254
255 Here's the form element - a select list in this case - that we will
256 associate the forth and final slider with.
257
258 -->
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
259 <select name="selectTest1" id="selectTest1">
260 <option value="1">One</option>
261 <option value="2">Two</option>
262 <option value="4">Four</option>
263 <option value="8">Eight</option>
264 <option value="16">Sixteen</option>
265 <option value="32">Thirty Two</option>
266 <option value="64">Sixty Four</option>
267 <option value="128">One Hundred and Twenty Eight</option>
268 <option value="256">Two Hundred and Fifty Six</option>
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
269 </select>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
270 <a href="#" onclick="fdSlider.disable('selectTest1'); return false;">Disable</a>
271 <a href="#" onclick="fdSlider.enable('selectTest1'); return false;">Enable</a>
272 </p>
273 <script>
274 fdSlider.createSlider({
275 // Associate the select list
276 inp:document.getElementById("selectTest1"),
277 // Use the tween animation
278 animation:"tween",
279 // Keep the form element, in this case a select list, visible
280 hideInput:false,
281 // Create a vertical slider
282 vertical:true,
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
283 // Give it the className "v-s2" which will make the slider 160px high
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
284 classNames:"v-s2"
285 });
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
286 </script>
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
287 </fieldset>
288 <fieldset>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
289 <legend>Dynamic Creation</legend>
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
290 <div id="corral">
291 <input name="dyn-1" id="dyn-1" type="text" title="Range: 5 to 15 in steps of 0.2" value="" maxlength="6" />
292 </div>
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
293 <button onclick="createNewSlider(); return false;">Create New slider</button>
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
294 <script>
295 // A quick & dirty function to create sliders dynamically
296 function createNewSlider() {
297 var id = "dyn-" + createNewSlider.idCnt,
298 // Check input element exists already
299 inpChk = document.getElementById(id),
300 // Create new input element if needs be
301 newInp = inpChk ? inpChk : document.createElement("input");
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
302
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
303 createNewSlider.idCnt++;
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
304
305 // Set attributes and add to DOM if needs be
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
306 if(!inpChk) {
307 newInp.type = "text";
308 newInp.id = id;
309 newInp.name = id;
310 newInp.maxlength = 6;
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
311 newInp.title = "Range: 5 to 15 in steps of 0.2";
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
312
313 document.getElementById("corral").appendChild(newInp);
314 };
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
315
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
316 // Create and associate a slider with the input element
317 fdSlider.createSlider({
318 // Associate the select list
319 inp:newInp,
320 // Use the tween animation
321 animation:"tween",
322 // Keep the form element hidden
323 hideInput:true,
324 // Set min, max and step
325 max:15,
326 min:5,
327 step:0.2
157791a @freqdec Bug fix for range type check in FF19
authored Mar 26, 2013
328 });
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
329 };
330
331 createNewSlider.idCnt = 1;
332
3f9e346 @freqdec New CSS file
authored Feb 26, 2012
333 // Call the function immediately to convert the input element already present
334 // within the HTML markup
01084d3 @freqdec Dynamic creation test & two new callbacks
authored Dec 19, 2011
335 createNewSlider();
336 </script>
dabdb44 @freqdec Updated demo to show how to use callbacks
authored Nov 16, 2011
337 </form>
338 </div>
339 </body>
340 </html>
Something went wrong with that request. Please try again.