Skip to content
mb.jquery.components edited this page May 14, 2015 · 11 revisions

jquery.mb.valueSlider

jquery.mb.valueSlider let you set a range between two numbers (positive or negative) and catch a value by dragging a cursor.

go to demo page
go to blog page

Dependencies:

  • needed: jquery.metadata.js (http://plugins.jquery.com/project/metadata)

JS call for the menu:


      $("#ex2 > div").mbSlider({
        maxVal:255,
        onSlideLoad:function(){changeColor($("#R").mbgetVal(),$("#G").mbgetVal(),$("#B").mbgetVal());},
        onSlide:function(){changeColor($("#R").mbgetVal(),$("#G").mbgetVal(),$("#B").mbgetVal());}
      });

HTML constructor:



<div style="display:inline-block;position:relative;">
<div id="R" data-property="{rangeColor:'red',negativeColor:'#ffcc00', startAt:100, grid:1, maxVal:255}"></div><br>
<div id="G" data-property="{rangeColor:'lime',negativeColor:'#ffcc00', startAt:45, grid:1, maxVal:255}"></div><br>
<div id="B" data-property="{rangeColor:'blue',negativeColor:'#ffcc00', startAt:74, grid:1, maxVal:255}"></div>
</div>

Parameters:

maxVal: (int) – set the max value for the slider
minVal: (int) – set the min value for the slider
grid: (int) – set the step interval for the slider
showVal: (boolean) – define if the actual value of the slider is shown
formatValue: function(val){} – A function that returns the formatted original value for the display
onSlideLoad: function(o){} – a callback fired once the slider is initialized
onStart: function(o){} – a callback fired once the slider start sliding
onSlide: function(o){} – a callback fired once the slider slids
onStop: function(o){} – a callback fired once the slider stop sliding

Metadata parameters:

rangeColor: (string) – the color of the range bar
negativeColor: (string) – the color of the negative range bar
startAt: (int) – the start position of the slider
grid: (int) – the step interval for the slider
maxVal: (int) – the max value for the slider
minVal: (int) – the min value for the slider

Methods:

$.fn.mbsetVal(val) – with this you can change the file a player is playing.
$.fn.mbgetVal() – with this you can change the file a player is playing.

Ex.:


$('#sl1').mbsetVal(100); //set the value of the slider to a specific value.
$('#sl1').mbgetVal(); //returns the actual value of the slider.

Format the values:

You can format the displayed values using the “formatValue” parameter. For example if your slider shows a range of dates you need to pass to the slider the time in milliseconds but you want to show the date:

The initializer:


      $("#s0").mbSlider({
        showVal: true,
        formatValue: function (val) {
          var formatVal = new Date(val).format("dd/m/yy");
          return formatVal;
        },
        onStop: function (o) {
          var val = $(o).mbgetVal();
          console.debug($(o).mbgetVal()) //milliseconds
          console.debug(new Date(val).format("dd/m/yy")) //formatted date
        }
      });

The HTML code:


<div id="s0" data-property="{rangeColor:'red',negativeColor:'#ffcc00', startAt:100, grid:1, maxVal:255}"></div>
Clone this wiki locally
You can’t perform that action at this time.