sliderBar.js

Ultra light-weight jQuery Slider Bar

View the Project on GitHub sw4/sliderBar.js

About

sliderBar.js is an ultra light-weight script built to provide easily themed slider bars to any page.

Setup

To use, you will need to download both the sliderBar script and css files and link to them in the HEAD section of your page. Note that sliderBar.js is dependant on jQuery which will need to be linked to beforehand. 

<head>
    <script src='jquery.min.js'></script>
    <script src='sliderBar.min.js'></script>
    <link rel='stylesheet' href='sliderBar.min.css'>
</head>

Basic Use

To initialize a slider, simply call the sliderBar(arguments) method on any element identified using a jQuery selector that has the class sliderBar.

HTML:

<div id="slider_1" class="sliderBar"></div>

jQuery:

$("#slider_1").sliderBar();

Result:

Arguments

A slider can be initialized with the following arguments:

min

Integer
Defaults to 0, represents the minimum value of the slider, must always be greater than zero

max

Integer
Defaults to 100, represents the maximum value of the slider

start

Integer
Defaults to 50, represents the starting value of the sldier, must always be greater than the minimum value, or less than the maximum, otherwise it will revert to the closest of the two

vertical

Boolean
Defaults to a value calculated from the underling slider elements orientation

handle

Boolean
Defaults to false, whether to provide a visible drag handle or not

onSlide

Function(value)
Event executed during slider value changing during slide (mousedown and drag), or on click - passed the new value as an argument

onSet

Function(value)
Event executed during slider value changing during click, or calling setsliderBar() method - passed the value as an argument

onChange

Function(value)
Event executed any time the slider value changes - passed the value as an argument

Methods

The following methods are available on any sliderBar object:

sliderBar(arguments)

Allows any slider arguments (see above) to be overwritten after the slider has been initialized

setsliderBar(value, trigger)

Manually set the value of a slider, trigger is an optional boolean - if set to true, the onSet and onChange events are fired.

getsliderBar()

Get the current slider value.

Requirements

sliderBar.js requires jQuery. Note that the library has only been tested with jQuery 2.1x though should be compatible with any reasonably current version. sliderBar also relies on some CSS3 as part of its default styling, however these can be overridden and do not effect functionality.

Examples

Vertical Slider

HTML:

<div id="slider_2" class="sliderBar"  style="height:100px;width:20px;"></div>

jQuery:

$("#slider_2").sliderBar();

Result:

Slider Linked to Input Field

HTML:

<div id="slider_3" class="sliderBar"></div>
<br>
Value: <input id="slider_3_input" type="text"/>

jQuery:

$("#slider_3").sliderBar({
    onChange:function(value){    
        $("#slider_3_input").val(value);
    }
});

Result:


Value:

Slider With Drag Handle Enabled

HTML:

<div id="slider_4" class="sliderBar"></div>

jQuery:

$("#slider_3").sliderBar({
    handle:true
});

Result: