Range Input Slider Solution In Pure JavaScript | mm-jsr

mm-jsr is a simple, lightweight, modular javascript plugin that helps you create accessible, efficient, mobile-friendly, and highly customizable range sliders for digital values.

Range input is the form field where one can choose a value from the minimum and maximum range. Although HTML 5 comes with the input[type="range"], its functionality lacks a lot of features. mm-jsr gives you anything you might need.

Browser support: Firefox, Chrome (and Chromium forks, ex: Brave, Edge, Opera, Vivaldi)

Must Read – jQuery Plugin That Creates Fast, Styleable Snappable Range Input In CSS

Features

  • screen responsivity,
  • custom minimum and maximum values (including negative numbers),
  • custom step of values (literally custom, it can be 0.001, 2, or 100),
  • any number of sliders,
  • collapsing labels,
  • fully and easily customizable through CSS and configuration,
  • support for touch devices,
  • support for keyboard,
  • and other!

How to make use of it:

1. Install & download the package.

# Yarn
$ yarn add mm-jsr

# NPM
$ npm i mm-jsr

2. Import the JSR element.

import JSR from 'mm-jsr';

3. Or load the bundled JavaScript within the doc.

<script src="https://cdn.jsdelivr.net/npm/mm-jsr/build/index.min.js"></script>

4. Load the mandatory stylesheet within the doc.

<link rel="stylesheet" href="styles.css">

5. Create a container component to hold the range slider.

<script src="https://cdn.jsdelivr.net/npm/mm-jsr/build/index.min.js"></script>

6. Create a brand new occasion of the mm-jsr and decide which modules need to be enabled.

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 wants:

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 choices 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 strategies.

// 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);

Must Read – [Multicolor] Gradient Range Slider Control Made in Pure JS

Modules

The most basic slider is built of Slider and Rail modules.

namedescriptioninvocation 
slidermoveable dots/pointsnew JSR.Slider() 
railhorizontal clickable bar behind slidersnew JSR.Rail() 
barthe moveable bar between sliders (moving adjacent sliders)new JSR.Bar() 
labelmoveable labels beneath slidersnew JSR.Label(options) 
gridthe vertical bar beneath slidersnew JSR.Grid(options) 
limitapplies limit for values that can be set (needs to be first in list of modules)new JSR.Limit(options) 

Read More – 

A Component for Date Range Picker With Vue And Moment.js
A Component for Date Range Picker With Vue And Moment.js


See Demo And Download

Official Website(soanvig): Click Here

This superior jQuery/javascript plugin is developed by soanvig. For extra Advanced Usage, please go to the official website.

Share