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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<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
slider.disable();

// Enable the range slider
slider.enable();

// Change the value to 50%
slider.setPercentage(50);

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