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 03: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 - 2017 dhtmlgoodies.com