Features
- Straightforward implementation with simple options;
- Running as many slider as needed;
- Easily customisable;
- Fully responsive;
- No dependency.
Installation
Include the latest Range.js script in the <head> or before your closing <body> tag, of your page.
<script src="src/range.min.js"></script>
Usage
Add a simple HTML text input in your page and set the attributes (min, max and step).
<input type="text" id="myRange" min="0" max="20" step="1" />
Initialize your slider in your script file or an inline script tag after the range.min.js script.
const source = document.getElementById( 'myRange' );
const myRange = rangejs( source );
Options
const options = {
css: false, //(Boolean) Default style. True to add default style.
buttons: false, //(Boolean) Increase/ Decrease buttons. True to enable.
start: function( event, ui, data ){}, //(Function) Fired when the dragging is triggered.
change: function( event, ui, data ){}, //(Function) Fired any time the value changes.
stop: function( event, ui ){}, //(Function) Fired when the dragging is stopped.
increase: function( event, ui, data ){}, //(Function) Fired any time the increase button is clicked.
decrease: function( event, ui, data ){} //(Function) Fired any time the decrease button is clicked.
};
Examples
Basic example
<input type="text" id="example1" value="20" max="100" min="0" step="1" />
const source = document.getElementById( 'example1' );
const options = {
css: true
};
rangejs( source, options );
Enable increase/ decrease buttons
<input type="text" id="example2" value="20" max="100" min="0" step="1" />
const source = document.getElementById( 'example2' );
const options = {
buttons: true,
css: true
};
rangejs( source, options );
Hidden input
<input type="hidden" id="example3" value="20" max="100" min="0" step="1" />
const source = document.getElementById( 'example3' );
const options = {
css: true
};
rangejs( source, options );
Decimal value
<input type="text" id="example4" value="55.7" max="100" min="0" step="0.1" />
const source = document.getElementById( 'example4' );
const options = {
css: true
};
rangejs( source, options );
Positive/ Negative value
<input type="text" id="example5" value="10" max="10" min="-10" step="1" />
const source = document.getElementById( 'example5' );
const options = {
css: true
};
rangejs( source, options );