Lightweight HTML5 based range data slider for mobile and desktop that creates data objects from user input and formats as JSON for modern web app's
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Pro Range Data Slider

DEPRECATED: I recomend using Material UI Slider here.

A substantial improvement over the data range sliders in jQueryUI and Twitter Bootstrap: This uses an astonishingly low 12kb payload and 3.5mb's of browser ram. Ready for touchscreens and desktop, outputs JSON from user input values for data operation in applications as well.

HTML5 range slider for modern web app's on touchscreens and desktop. Written in HTML5, CSS3, and vanilla JavaScript, that is super lightweight at 12kb without all the performance hits and mobile/tablet problems that jQueryUI + Bootstrap have.

##Browser Support: Chrome ONLY!


  • Modular code so you can add your own functionality with:

         var myNewSlider = new ProRangeSlider(SliderId, OutputId, ColorClass) {
                          //extended functionality here
  • HTML5 ready. Use the new elements with confidence

  • A touch friendly data range slider

  • No code bloat

  • Formats input to JSON

  • Tallys amounts from each range slider to provide a total

  • Can be re-styled any way you like in CSS

Quick start

  1. Download the latest stable release from GitHub.
  2. Clone the git repo — git clone - and checkout the tagged release you'd like to use.

How to use

  1. Something
  2. Something else
  3. Then do this
  4. Or do that


Anyone and everyone is welcome to contribute. Please branch first.