Minimal Range Slider Control In Vanilla JavaScript – gRanger

gRanger.js is a very small JavaScript plugin to generate a range slider control for min/max input fields.

How to use it:

Create a slider container next to the min/max input fields as follows:

<input type="text" value="10" id="min">
<input type="text" value="100" id="max">
<div class="g-ranger" id="range"></div>

Import the gRanger’s JavaScript and Stylesheet into the page.

<link rel="stylesheet" href="css/gRanger.min.css">
<script src="js/gRanger.min.js" defer></script>

Initialize the range slider control.

new gRanger('#range', '#min', '#max');

Set the step size on each drag & move.

new gRanger('#range', '#min', '#max', stepSize);