seiyria/bootstrap-slider

A less buggy fork of the original bootstrap slider found on http://www.eyecon.ro/ by Stefan Petre. It was forked so we could update the slider since the original wasn't under version control.

4.8.1 2015-04-11 15:38 UTC

Apache 2.0

• Kyle Kemp
• Lucas Zardo
• Rohit Kalkur

• javascript
• css
• bootstrap
• slider

README

Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.

Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completly different.

Please ensure that you are using this library instead of the Petre version before creating issues in the repository Issue tracker!!

Installation

Clone the repository, then run npm install

Want to use bower? bower install seiyria-bootstrap-slider

Want to use npm? npm install bootstrap-slider

NOTE for NPM users: In order to keep the version numbers in our dist/ file consistent with our Github tags, we do a patch version bump, generate a new dist, and create a commit/tag on postpublish.

This does mean the Github repo will always be one patch commit off of what is published to NPM. Note that this will not affect functionality, and is only used to keep package management system files and the dist file version numbers in sync.

Basic Setup

Load the plugin CSS and JavaScript into your web page, and everything should work!

Remember to load the plugin code after loading the Bootstrap CSS and JQuery.

JQuery is optional and the plugin can operate with or without it.

Look below to see an example of how to interact with the non-JQuery interface.

Supported Browsers

We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!

Examples

You can see all of our API examples here.

Using bootstrap-slider (with JQuery)

Create an input element and call .slider() on it:

// Instantiate a slider
var mySlider = $("input.slider").slider();

// Call a method on the slider
var value = mySlider.slider('getValue');

// For non-getter methods, you can chain together commands
	mySlider
		.slider('setValue', 5)
		.slider('setValue', 7);

What if there is already a slider plugin bound to the JQuery namespace?

If there is already a JQuery plugin named slider bound to the JQuery namespace, then this plugin will take on the alternate namespace bootstrapSlider.

// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();

// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');

// For non-getter methods, you can chain together commands
	mySlider
		.bootstrapSlider('setValue', 5)
		.bootstrapSlider('setValue', 7);

Using bootstrap-slider (without JQuery)

Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.

// Instantiate a slider
var mySlider = new Slider("input.slider", {
	// initial options object
});

// Call a method on the slider
var value = mySlider.getValue();

// For non-getter methods, you can chain together commands
mySlider
	.setValue(5)
	.setValue(7);

Using as CommonJS module

bootstrap-slider can be loaded as a CommonJS module via Browserify, Webpack, or some other build tool.

var Slider = require("bootstrap-slider");

var mySlider = new Slider();

Note that the JQuery dependency is considered to be optional. For example, to exclude JQuery from being part of your Browserify build, you would call something like the following (assuming main.js is requiring bootstrap-slider as a dependency):

browserify -u jquery main.js > bundle.js

Please see the documentation for the specific CommonJS loader you are using to find out how to exclude dependencies.

Options

Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formatter argument - that can not be passed as a data- attribute.

Functions

NOTE: Optional parameters are italicized.

Events

Version Bumping and Publishing (Maintainers Only)

To bump the version number across all the various packagement systems the plugin is registered with, please use the grunt bump plugin.

• grunt bump:patch - patch version bump, 0.0.0 -> 0.0.1
• grunt bump:minor - minor version bump, 0.0.0 -> 0.1.0
• grunt bump:major - major version bump, 0.0.0 -> 1.0.0

After bumping, type npm publish to update on NPM.

Other Platforms & Libraries

• Ruby on Rails
• knockout.js (@cosminstefanxp, #81)
• AngularJS
• NuGet
• MeteorJS

Maintainers

• Kyle Kemp
  • Twitter: @seiyria
  • Github: seiyria
• Rohit Kalkur
  • Twitter: @Rovolutionary
  • Github: rovolution