Feature-rich Range Slider With Pure JavaScript – jsr

Category: Form , Javascript , Recommended | February 7, 2019
Author: mm-jsr
Views Total: 2,437
Official Page: Go to website
Last Update: February 7, 2019
License: MIT


Feature-rich Range Slider With Pure JavaScript – jsr


jsr is a simple, lightweight JavaScript plugin that helps you create accessible, performant, mobile-friendly, highly customizable range slider for numeric values.

How to use it:

Include both mm-jsr.css and mm-jsr.js on the webpage.

<link rel="stylesheet" href="mm-jsr.css">
<script src="mm-jsr.js"></script>

Create normal range inputs for the range slider. Note that the jsr library supports all native range input attributes such as ‘step’, ‘min’, ‘max’, etc.

<label for="jsrMin">Select minimum value</label>
<input id="jsrMin" name="range[min]" type="range" min="50" max="200" step="1" value="150">
<label for="jsrMax">Select maximum value</label>
<input id="jsrMax" name="range[max]" type="range" value="175">

Initialize the jsr library with some options.

var range = new JSRange('#jsrMin', '#jsrMax', {
    sliders: 3,
    values: [25, 50, 75]

All possible options with default values.

var range = new JSRange('#jsrMin', '#jsrMax', {
    // min/max values
    min: 0,
    max: 100,

    // step size
    step: 1,

    // values from smallest to biggest
    values: [25, 75],

    labels: { 
      minMax: true,
      formatter: null

    limit: {
      show: false // shows limit

    grid: {
      color: 'rgba(0, 0, 0, 0.3)', // grid color
      height: 10, // grid height
      fontSize: 10, // font size
      fontFamily: 'sans-serif', // fFont family
      textPadding: 5 // padding in pixels

     // 'debug', 'info', 'warn', 'error'
    log: 'error'


v1.1.5 (02/07/2019)

  • Bugfix

v1.1.4 (06/03/2018)

  • Bugfix

You Might Be Interested In:

Leave a Reply