Author: | soanvig |
---|---|
Views Total: | 502 views |
Official Page: | Go to website |
Last Update: | April 13, 2022 |
License: | MIT |
Preview:

Description:
jsr is a simple, lightweight, modular JavaScript plugin that helps you create accessible, performant, mobile-friendly, highly customizable range sliders for numeric values.
How to use it:
1. Install & download the package.
# Yarn $ yarn add mm-jsr # NPM $ npm i mm-jsr
2. Import the JSR component.
import JSR from 'mm-jsr';
3. Or load the bundled JavaScript in the document.
<script src="https://cdn.jsdelivr.net/npm/mm-jsr/build/index.min.js"></script>
4. Load the necessary stylesheet in the document.
<link rel="stylesheet" href="styles.css">
5. Create a container element to hold the range slider.
<script src="https://cdn.jsdelivr.net/npm/mm-jsr/build/index.min.js"></script>
6. Create a new instance of the mm-jsr and determine which modules should be enabled. All possible modules:
- JSR.Rail(): horizontal bar
- JSR.Slider(): draggable slider
- JSR.Bar(): bars between values
- JSR.Label(): lables
- JSR.Grid(): grids
- JSR.Limit(): visualize the limit
const jsr = new JSR({ modules: [ new JSR.Rail(), new JSR.Slider(), new JSR.Bar(), new JSR.Label(), new JSR.Grid(), new JSR.Limit(), ] });
7. Config the range slider as per your needs:
const jsr = new JSR({ modules: [ new JSR.Rail(), new JSR.Slider(), new JSR.Bar(), new JSR.Label(), new JSR.Grid(), new JSR.Limit(), ], config: { // min/max values min: 0, max: 100, // step size step: 0.01, // limit values limit: { min: 15, max: 90, }, // initial values initialValues: [25, 50, 75], // target container container: document.getElementById('jsr'), } });
8. Possible options for the Grid module.
const jsr = new JSR({ modules: [ new JSR.Grid({ color: '#333' fontFamily: 'Roboto' fontSize: 24 formatter: null, height: 10 textPadding: 5 }), ], });
9. API methods.
// change limit jsr.changeLimit({ max?: number; min?: number }); // destroy jsr.destroy(); // disable jsr.disable(); // enable jsr.enable(); // check if is enabled jsr.isEnabled(); // set ratio value jsr.setRatioValue(); // get ratio value jsr.getRatioValue(); // set real value jsr.setRealValue(); // get real value jsr.getRealValue(); // event jsr.onValueChange(handler: ValueChangeHandler);
Changelog:
v3.0.2 (04/13/2022)
- Update
v2.2.2 (03/30/2022)
- Update
v2.0.4 (04/21/2022)
- Rewritten
- Doc & Demo updated
v1.1.6 (05/01/2019)
- clean up
v1.1.5 (02/07/2019)
- Bugfix
v1.1.4 (06/03/2018)
- Bugfix