UNPKG

range-touch

Version:

range-touch is my answer to: http://stackoverflow.com/questions/5484540

github.com/dwyl/range-touch

dwyl/range-touch

41 lines (31 loc) • 1.66 kB
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&lt;input type&#61;&quot;range&quot;&gt;</title> <!-- CSS Styles are 100% Optional! --> <link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/range-touch/master/demo/style.css"> </head> <body> <!-- no styles just browser default --> <h2> &lt;input type&#61;&quot;range&quot;&gt; (browser default)</h2> <input type="range"> <!-- a bit more style --> <h2> &lt;input type&#61;&quot;range&quot; class&#61;&quot;custom&quot;&gt; (a bit of style)</h2> <input type="range" class="custom" value ="0"> <!-- a bit more style --> <h2> &lt;input type&#61;&quot;range&quot; class&#61;&quot;custom&quot;&gt; (customize everything)</h2> <input type="range" class="custom" min="0" max="100" value ="0"> <h2> &lt;input type&#61;&quot;range&quot; class&#61;&quot;display-value&quot;&gt; (display value while sliding)</h2> <input type="range" class="custom display-value" min="0" max="100" value ="0"> <output>0</output>% <!-- Pick a JavaScript (DOM) Libarary --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- 26kb --> <!-- OR --> <!-- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 93kb!! --> <!-- load the range-touch.js file to enable slider on touch devices --> <script type="text/javascript" src="https://cdn.rawgit.com/dwyl/range-touch/master/range-touch.min.js"></script> <!-- OPTIONAL: display the value as the slider is changing --> <script type="text/javascript" src="https://cdn.rawgit.com/dwyl/range-touch/master/demo/display-range-value.js"></script> </body> </html>