JQuery Seekbar

Demo

Bookmark and Share

License

Apache Free License 2.0

Download

Download seekbar.zip

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

Demo

Configuration

Include files

Example:

<script type="text/javascript" src="js/jquery-1.11.2.min.js"> </script>
<script type="text/javascript" src="js/seekbar.js"> </script>
<link rel="stylesheet" type="text/css" href="css/seekbar.css"/>

Step 2: Create a <div> placeholder

Example:

<div id="seekbar-container" style="width:300px;height:50px"></div>

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

zahid
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.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.