Multifunctional Slider Control Plugin For jQuery - mb.valueSlider

mb.valueSlider is a jQuery plugin to create multifunctional slider controls for easily selecting and changing values by dragging the handlers. Ideal for color picker, value picker, date (range) picker, and etc.

Basic usage:

1. Include jQuery JavaScript library and the jQuery mb.valueSlider plugin's JavaScript & CSS files on the html page.

<link href="css/mb.slider.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js" ></script>
<script src="inc/jquery.mb.slider.js"></script>

2. To create a basic value slider, just add the mb_slider to a block element and pass the options as an array to the data-property attribute as follows:

<div id="basci" class="mb_slider" 
     data-property="{minVal:-10,rangeColor:'green', maxVal:10, grid:1, startAt:-3}">
</div>

3. All possible plugin options with default values.

{
  minVal       : 0,
  maxVal       : 100,
  grid         : 0,
  showVal      : true,
  labelPos     : "top",
  rangeColor   : "#000",
  negativeColor: "#e20000",
  formatValue  : function (val) {return parseFloat(val)}
}

4. Callback functions.

{
  onSlideLoad  : function (o) {},
  onStart      : function (o) {},
  onSlide      : function (o) {},
  onStop       : function (o) {}
}

5. API methods.

// set the value
$.fn.mbsetVal(val);

// get the value
$.fn.mbgetVal();

Changelog:

2020-04-17

• Bugs fixed

2018-10-30

• Now works with mobile

2017-11-23

• CSS update

---

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