Touch-enabled Range Slider With Stop Points

File Size: 8.13 KB
Views Total: 3508
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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>

4. Initialize the plugin on the top container and done.


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