Android Style SeekBar / Slider Plugin For jQuery - seekbar.js

seekbar.js is a lightweight jQuery plugin used for creating customizable Android style SeekBar and Slider controls which allow the visitor to set the current progress level by dragging or touching the thumb.

How to use it:

1. Put the required CSS in the head section of your HTML document.

<link rel="stylesheet" href="css/seekbar.css">

2. Create an empty container for the SeekBar.

<div id="demo" style="width:300px;height:50px">

3. Put the seekbar.js script after jQuery library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/seekbar.js"></script>

4. Render a basic SeekBar within the container.

var seekbar = new Seekbar.Seekbar({
    renderTo: "#demo"
});

5. Full customization options.

thumbAlpha : 1,
renderTo:undefined,
negativeColor : '#006699',
positiveColor : '#ccc',
thumbColor : '#006699',

minValue : 0,
maxValue : 10,
value: 0,

barSize: 2,

el : undefined,
elNegative : undefined,
elPositive: undefined,

thumb:undefined,
thumbInner:undefined,
thumbOuter:undefined,
needleSize: 0.2,

area : { width: 0, height: 0, max:0 },
valueArea: { min: 0, max: 0, width:0 },

orientation : undefined,
thumbSize : 0,
isActive : false,

startCoordinates:undefined,

valueListener:undefined,

Change log:

2016-08-02

• Click event on seekbar

2015-11-28

• Bugfix when minValue greater than 0

---

This awesome jQuery plugin is developed by DHTMLGoodies. For more Advanced Usages, please check the demo page or visit the official website.