range-slider/index.html at main · FY0u11/range-slider · 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
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Range Slider</title>
  <style>
      .container {
          padding-top: 50px;
          margin: 0 auto;
          width: 60%;
          display: flex;
          gap:15px;
          flex-direction: column;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="r-slider"></div>
  <div class="r-slider" data-steps='[120,500,1000,5000,50000]'></div>
  <div class="r-slider" data-steps='["a","b","c","d","e","f","g"]'></div>
  <div class="r-slider" data-steps='["First","Second","Third"]' data-start-index="1"></div>
  <div class="r-slider" data-min="-100" data-max="0" data-step="10"></div>
</div>
<script>
  const s1 = document.getElementsByClassName('r-slider')[0],
        s2 = document.getElementsByClassName('r-slider')[1],
        s3 = document.getElementsByClassName('r-slider')[2],
        s4 = document.getElementsByClassName('r-slider')[3],
        s5 = document.getElementsByClassName('r-slider')[4]

  s1.addEventListener('r-slider-updated', e => console.log('slider1', e.detail.value))
  s2.addEventListener('r-slider-updated', e => console.log('slider2', e.detail.value))
  s3.addEventListener('r-slider-updated', e => console.log('slider3', e.detail.value))
  s4.addEventListener('r-slider-updated', e => console.log('slider4', e.detail.value))
  s5.addEventListener('r-slider-updated', e => console.log('slider5', e.detail.value))
</script>
</body>
</html>