JQuery Seekbar

Demo

License

Apache Free License 2.0

Download

Download seekbar.zip

Or from Github: https://github.com/DHTMLGoodies/jquery-seekbar

Demo

Configuration

Include files

Example:

Step 2: Create a <div> placeholder

Example:

When the width is greater than height, a horizontal seekbar will be rendered, otherwise, a vertical seekbar will be created.

Step3: Configure the seek bar

These are the options you can configure:

renderTo: Where to render the slider, example: renderTo: "#seekbar-container" which will insert the slider into the previous created <div> placeholder with id "seekbar-container".
minValue: The minimum value of the slider(default = 0)
maxValue: The maximum value of the slider(default = 10)
value: Initial value of the slider(default = 10)
negativeColor: The color of the bar left to the thumb(or below in vertical mode). Default: green
positiveColor: The color of the bar right of the thumb(or above in vertical mode). Default: light gray
thumbColor: The color of the thumb. Default: green. This property supports specifying an ARGB code in case you want to add transparency to the thumb. Example: #CCAACC00 where CC is the Alpha value. FF means no transparency, while 00 is fully transparent. If you don't specify an Alpha value, it will by default be 100% opaque.
needleSize: The color of needle(center of the thumb) in fraction of thumb size. Default: 0.2
barSize: The width in pixels(height in vertical mode) of the bar. Default: 2
valueListener: A function which will receive notifications when value has changed. This function can also be used to round the value in case you don't want decimals. Example: valueListener:function(value){
this.setValue(Math.round(value));
}

You can also do some layout configurations in css/seekbar.css. Example: if you want some transparency when the thumb is not dragged, you can enable it using

.seekbar-thumb{
background-color:#006699;
opacity:0.8;
}

Transparency to thumbs of individual seekbar widgets can also be applied using the technique described above(see "thumbColor").

Code example

var blueSlider = new Seekbar.Seekbar({
   renderTo: "#seekbar-container-vertical-blue",
   minValue: 1, maxValue: 255,
   valueListener: function (value) {
      this.value = Math.round(value);
      updateColorPreview();
   },
   thumbColor: '#006699',
   negativeColor: '#006699',
   positiveColor: '#CCC',
   value: 100
});

Update the seekbar programatically

To update the value of a seekbar, use the setValue function. Example:

blueSlider.setValue(200);

Comments

how can i use this seekbar multiple times with different width. i'm using this seekbar multiple times in one page but seekbar is taking the minimum width size for all.can you help me. :)

zahid at 09:44AM, 2016/04/29.