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="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
}

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