Android-style Range Slider Control With jQuery - RangeSlider

Android-style Range Slider Control With jQuery - RangeSlider

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

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.

  • Publication date: 14.02.2018
  • Source