Rangebar.js is a vanilla JavaScript library for displaying slim, beautiful, horizontal, or vertical range sliders on your web applications. Supports both single and multiple sliders.
multi range slider, double range slider, range slider with multiple handles, multi range slider css, multi range slider javascript
Mobile-friendly Range Slider Component For Angular 6+
How to make use of it:
Install:
yarn add rangebar npm i -S rangebar
1. Import the Rangebar into your project or embed the following JavaScript and CSS files directly into your document.
<script src="dist/rangebar.js"></script>
2. Javascript to create a new Range bar:
new Rangebar({ target: getElementById('targetID') });
3. Configure the bouncer bar as follows:
new Rangebar({ target: getElementById('targetID'), data: { style: { // defualts len: '8em', width: '4px', barBackgroundColor: '#222', buttonBackgroundColor: '#cb1b45' }, horizontal: true, // or false (vertical) (default: true) min: 0, // minimum value (defualt: 0) max: 100, // maximum value (default: 100) buttons: [ // specify init position (required) 10, 20, 30 ], onChange(values) { console.log(values.length) // 3, This returns the new value of this.buttons } } });
Slim Multi Range Slider Component, Rangebar Plugin/Github
See Demo And Download
Official Website(nju33): Click Here
This superior jQuery/javascript plugin is developed by nju33. For extra advanced usage, please go to the official website.
Be First to Comment