Material Design style Custom Range Slider Plugin With jQuery rangeslider js

How to use it:

1.Include the rangeslider.css inside the head tag and the rangeslider.js just before we close the body tag

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

2.Create an element that will be served as the container for your range slider.

<div id="range">

3. Initialize the plugin with some options to render a basic range slider inside the DIV element you just created.

new RangeSlider($("#range"), {
    size: 1,
    borderSize: 0.4,
    percentage: 100,

4. All 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: bar and circle color
  • bgclolour:background color

5. Optional events and methods.

  • onDown: when a finger touches the slider
  • onTMove: when a finger touches the slider and moves
  • onUp: when the finger is over the slider
  • setBar(percentage): set a specified percentage
  • disable(): disable the plugin
  • enable(): re-enable the plugin

Demo     Download

Material Design style Custom Range Slider Plugin With jQuery rangeslider js

| CSS3, Google Material Framework, HTML5, Javascript, jQuery Plugins | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.