JQuery Seekbar


Bookmark and Share


Apache Free License 2.0


Download seekbar.zip

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



Include files


<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


<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){

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


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);
   thumbColor: '#006699',
   negativeColor: '#006699',
   positiveColor: '#CCC',
   value: 100

Update the seekbar programatically

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



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.

Confirmation code:

Go to cbolson.com

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com