Feature-rich Range Slider With Pure JavaScript – mm-jsr

Category: Form , Javascript , Recommended | April 21, 2021
Author: soanvig
Views Total: 63 views
Official Page: Go to website
Last Update: April 21, 2021
License: MIT

Preview:

Feature-rich Range Slider With Pure JavaScript – mm-jsr

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:

v2.0.4 (04/21/2021)

  • 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

You Might Be Interested In:


Leave a Reply