range.js

Finally, a range slider that we all deserve.

by Karen Javadyan

HTML

<link rel="stylesheet" href="https://rawgit.com/bruntouchables/range.js/master/range.css">
<script src="https://rawgit.com/bruntouchables/range.js/master/range.js"></script>
<label for="input">Rate us:</label>
<input type="range" min="-10" max="10" step="1" id="input">
<output id="output"></output>
<p>
zzzzzzzzzzzzzzzzzzz
</p>

<label for="input2">Rate me:</label>
<input type="range" min="-10" max="10" step="1" id="input2">
<output id="output2"></output>

JavaScript

let inputElement = document.getElementById('input');
let outputList = document.getElementById('output');

let range = Range.init(inputElement, [outputList], () => {
  // "on init" callback
  console.log("range.js has been successfully initialized.");
});

let inputElement2 = document.getElementById('input2');
let outputList2 = document.getElementById('output2');

let range2 = Range.init(inputElement2, [outputList2], () => {
  // "on init" callback
  console.log("range.js has been successfully initialized.");
});