Touch-enabled Range Slider With Stop Points
File Size: | 8.13 KB |
---|---|
Views Total: | 4724 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight jQuery plugin that helps you create a customizable, responsive, touch-enabled range slider UI with stop points.
More Features:
- Change the value with click, drag, or touch events.
- Automatically calculate the stops and add corresponding blank spaces between them.
- Display a colored line to the left of the selected stop.
- And use the background color of the parent element to et the background behind the unselected track.
- Highlight the current stop and label when selected.
How to use it:
1. Insert jQuery JavaScript library and the Range Slider plugin's files into the document.
<link rel="stylesheet" href="/path/to/css/slider.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/slider.js"></script>
2. Create a normal range slider input on the page.
<div id="example" class="range"> <input id="input-range" type="range" min="1" max="7" steps="1" value="1"> </div>
3. Create a list of labels below the range slider input and define the stops in the data-stop
attribute:
<ul id="labels-range" class="range-labels"> <li data-stop=12 class="active selected">12 hrs</li> <li data-stop=24>24 hrs</li> <li data-stop=48>48 hrs</li> <li data-stop=72>72 hrs</li> <li data-stop=120>5 days</li> <li data-stop=240>10 days</li> <li data-stop=360>15 days</li> </ul>
4. Initialize the plugin on the top container and done.
slider('example');
This awesome jQuery plugin is developed by jxmot. For more Advanced Usages, please check the demo page or visit the official website.