Minimal Range Slider Control In Vanilla JavaScript – gRanger

Category: Form , Javascript | January 15, 2018
Author: lunegov
Views Total: 2,458
Official Page: Go to website
Last Update: January 15, 2018
License: MIT

Preview:

Minimal Range Slider Control In Vanilla JavaScript – gRanger

Description:

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);

You Might Be Interested In:


Leave a Reply