Simple Multi-Range Slider Plugin widget for jQuery Mobile | jqm-multislider

multi-range-slider-plugin

Multislider is a tool for jQuery mobile. It is similar to a range slider but supports multiple slider processors. So you have multiple ranges. Indifference by standard range slider, input fields do not appear. JQuery mobile slider widget that allows you to combine multiple range input into a multi-range slider widget.

multi range slider, jquery multiple range slider, range slider with multiple handles, multicolor range slider,

How to make use of it:

1. Insert jQuery library and jQuery Mobile’s JavaScript & Stylesheet into the doc.

<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 model of the multi slider library within the doc.

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

3. Create a number of various inputs on the webpage. You’re capable of customizing the multi slider with the next attributes:

<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 accomplished it.

let mySlider = $('#multi')

5. Add/remove sliders manually.

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

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

6. You can even move the choices to the multi slider during init.

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

Multi Range Slider Plugin, Multislider Widget Github


See Demo And Download

Official Website(Vertumnus): Click Here

This superior jQuery/javascript plugin is developed by Vertumnus. For extra Advanced Usages, please go to the official website.