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

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