Originally began as a loose "fork" of bootstrap-slider found on https://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!!

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

Want to use npm? npm install bootstrap-slider

Want to get it from a CDN? https://cdnjs.com/libraries/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.

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.

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

You can see all of our API examples here.

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);

Create an input element with the data-provide="slider" attribute automatically turns it into a slider. Options can be supplied via data-slider- attributes.

<input
	type="text"
	name="somename"
	data-provide="slider"
	data-slider-ticks="[1, 2, 3]"
	data-slider-ticks-labels='["short", "medium", "long"]'
	data-slider-min="1"
	data-slider-max="3"
	data-slider-step="1"
	data-slider-value="3"
	data-slider-tooltip="hide"
>

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);

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);

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 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.

NOTE: Optional parameters are italicized.

• Clone the repository
• Run nvm use in your Terminal to switch to the proper Node/NPM version
• Once you are on specified Node version, run npm install
• Install the Grunt CLI: npm install grunt-cli -g
• Type grunt dev to launch browser window with Examples page

This plugin uses Grunt as its command-line task runner.

To install the Grunt CLI, type npm install grunt-cli -g.

To execute any of the commands, type grunt <task-name> in your terminal instance.

The following is a list of the commonly-used command line tasks:

• grunt development: Generates the index.html, compiles the LESS/JS to the /temp directory, and launches the index.html in your system's default browser. As changes are made to source code, the browser window will auto-refresh.
• grunt production: Generates the /dist directory with minified and unminified assetts.
• grunt dev: Alias for grunt development
• grunt prod: Alias for grunt production
• grunt build: Transpiles JavaScript source via Babel and compiles LESS source to CSS to temp directory.
• grunt lint: Runs JSLint on the JavaScript source code.
• grunt test: Runs unit tests contained in /test directory via Jasmine.

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.

• Ruby on Rails
• knockout.js (@cosminstefanxp, #81)
• AngularJS
• EmberJS (@ksnyde)
• ReactJS
• NuGet (@ChrisMissal)
• MeteorJS
• Maven

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