Touch-enabled Range Slider With Stop Points

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.