multi-slider-range/example.html at master · hitsthings/multi-slider-range · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Multi-slider Range input</title>
    <link rel="stylesheet" href="range.css" />
</head>
<body>
    <div class="range" data-min="2" data-max="8" data-step="1">
        <input type="hidden" name="one" value="3" />
        <input type="hidden" name="two" value="5" />
    </div>
    <div id="log"></div>

    <script>
        var logEl = document.getElementById('log');
        document.body.addEventListener('change', function(e) {

            logEl.innerText = [
                'Changed ',
                e.target.getAttribute('data-name'),
                ' to ',
                e.target.getAttribute('data-value')
            ].join('');

        });

    </script>
    <script src="range.js"></script>
</body>
</html>