range.js

Finally, a range slider that we all deserve.

by Bruntouchables

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>

JavaScript

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

let range = new Range(inputElement, outputElement, () => {
  // do something on init
});

// to set a value
range.setValue(7);

// to get a value
let value = range.getValue();
console.log(value);

range.onClick(() => {
  // do something on click
});

range.onSlide(() => {
  // do something on slide
});

range.onSlideEnd(() => {
  // do something on slide end
});

range.onValueChange(() => {
  // do something only when the value has been changed
});