Multifunctional Slider Control Plugin For jQuery - mb.valueSlider

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.

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-3.2.1.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();

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

  • Publication date: 21.11.2017
  • Source