Android-style Range Slider Control With jQuery - RangeSlider

Android-style Range Slider Control With jQuery - RangeSlider
File Size: 9.78 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A minimal, clean, mobile-friendly range slider plugin inspired by Android that enables you to adjust model values with mouse drag and touch events.

How to use it:

1. Import the jQuery RangeSlider plugin's files into the document which has jQuery library loaded.

<link href="src/rangeslider.css" rel="stylesheet">
<script src="" 
<script src="src/rangeslider.js"></script>

2. Create a container in which you want to generate the range slider.

<div id="example"></div>

3. The JavaScript to generate a range slider inside the container you created.

var range = new RangeSlider($("#example"), {
    // options here

4. All possible plugin options.

  • size: Size of the bar in em
  • ratio: The ratio of bar/circle
  • multiple: The multiple of the size the circle reaches when clicked
  • borderSize: The size of the border that surrounds the circle
  • percentage: Starting position
  • fgColour: Circle and bar color
  • bgColour: Background color
var range = new RangeSlider($("#example"), {
    size: 1,
    ratio: .3,
    multiple: 1.2,
    borderSize: .4,
    percentage: 30,
    fgColour: '#04B404',
    bgColour: '#ddd'

5. Event handlers.

var range = new RangeSlider($("#example"), {
    onDown: function(e, percentage) {
      console.log("Clicked at", percentage + "%");
    onMove: function(e, percentage) {
      console.log("Moved to", percentage + "%");
    onUp: function(e, percentage) {
      console.log("Slider control ended");

6. API methods.

// Disable the range slider

// Enable the range slider

// Change the value to 50%

This awesome jQuery plugin is developed by domsleee. For more Advanced Usages, please check the demo page or visit the official website.