Multi Range Slider Plugin For jQuery Mobile - multiSlider

Multi Range Slider Plugin For jQuery Mobile - multiSlider
File Size: 14 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

multiSlider is an extension to the jQuery mobile slider widget that allows you to merge several range inputs into a multi range slider widget.

How to use it:

1. Insert jQuery library and jQuery Mobile's JavaScript & Stylesheet into the document.

<link rel="stylesheet" href="" integrity="sha384-/Ayp+mRNZjWzcpWvoDvKSHShOLWNo8Xvhjt1jsuzrSlEUnuydeBTHeA13ApkKvSP" crossorigin="anonymous">
<script src="" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="" integrity="sha384-u7i0wHEdsFrw92D1Z0sk2r6kiOGnZJhnawPUT0he8TRKfD4/XMEsj22l/cHFXO3v" crossorigin="anonymous"></script>

2. Load the minified version of the multiSlider library in the document.

<script src="jqm-multislider.min.js"></script>

3. Create multiple range inputs on the webpage. You're able to customize the multi slider with the following attributes:

  • min: min value
  • max: max value
  • step: step size
  • data-show-value: whether to show the current value in the label
<div id="multi" 
   <input type="range">
   <input type="range">
   <input type="range">

4. Initialize the multi slider and done.

let mySlider = $('#multi')

5. Add/remove sliders manually.

// add a new slider

// remove a slider

6. You can also pass the options to the multi slider during init.

  min: 0,
  max: 100,
  step: 1,
  showValue: true

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