Multifunctional Slider Control Plugin For jQuery - mb.valueSlider

File Size: 19.2 KB
Views Total: 3830
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" ></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}">

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

// get the value



  • Bugs fixed


  • Now works with mobile


  • CSS update

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