Multi Range Slider Plugin For jQuery Mobile - multiSlider

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="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" integrity="sha384-/Ayp+mRNZjWzcpWvoDvKSHShOLWNo8Xvhjt1jsuzrSlEUnuydeBTHeA13ApkKvSP" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" 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" 
     data-role="multislider" 
     min="0" 
     max="100" 
     step="1" 
     data-show-value="true">
   <input type="range">
   <input type="range">
   <input type="range">
</div>

4. Initialize the multi slider and done.

let mySlider = $('#multi')

5. Add/remove sliders manually.

// add a new slider
mySlider.multislider('increase')

// remove a slider
mySlider.multislider('decrease')

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

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

Changelog:

2021-05-13

• Update dependencies

---

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