New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
JQuery Seekbar
License
Download
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);
Post your comment
Comment preview: