Dual Range Input

Hello World

<div class="dual-range-1">
  <input type="range" class="range-start" value="30" max="100">
  <input type="range" class="range-end" value="60" max="100">
</div>
<script type="module">
  import DualRangeInput from 'https://unpkg.com/dual-range-input@latest/script.js';
  DualRangeInput(".dual-range-1");
</script>

Flexible Ranges

<div class="dual-range-2">
  <input type="range" class="range-start" value="10" max="50">
  <input type="range" class="range-end" value="40" max="50">
</div>
<script type="module">
  import DualRangeInput from 'https://unpkg.com/dual-range-input@latest/script.js';
  DualRangeInput(".dual-range-2");
</script>

Works Without JavaScript

It's just two regular inputs in disguise: 🙈

<div>
  <input type="range" class="range-start" value="10" max="50">
  <input type="range" class="range-end" value="40" max="50">
</div>
<script type="module">
  // DualRangeInput(".dual-range-3");
</script>

Reactive & Accessible

<div class="dual-range-4">
  <input type="range" class="range-start" value="10" max="100">
  <input type="range" class="range-end" value="90" max="100">
</div>
<script type="module">
  import DualRangeInput from 'https://unpkg.com/dual-range-input@latest/script.js';
  DualRangeInput({ selector: ".dual-range-4", debug: true });
</script>

Custom Labels

DualRangeInput({
  selector: ".dual-range-5",
  label: d => Math.floor(d/60) + ":" + d % 60
});

Change Events

DualRangeInput({
  selector: ".dual-range-6",
}).on('change', (e, {start, end} => {
  console.debug({e, start, end})
}))

DOM Manipulation

DualRangeInput({
  selector: ".dual-range-7",
}).update({
  min: 1,
  start: 3,
  end: 5,
  max: 7
})