Feature-rich Range Slider With Pure JavaScript – jsr

Category: Form , Javascript , Recommended | July 10, 2017
Author: mm-jsr
Views Total: 600
Official Page: Go to website
Last Update: July 10, 2017
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', {
    step: 0.01,
    prefixes: {
        min: '$ ',
        from: '$ ',
        single: '$ '
    suffixes: {
        max: ' $',
        to: ' $'

All possible options with default values.

var range = new JSRange('#jsrMin', '#jsrMax', {
    single:       false,
    prefixes:     {},
    suffixes:     {},
    grid:         { 
      step: 0.02, 
      bigstepNth: 5, 
      disabled: true, 
      values: false