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

If there is already a JQuery plugin named slider bound to the 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);

Loading as CommonJS module

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

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.

Name	Type	Default	Description
id	string	''	set the id of the slider element when it's created
min	float	0	minimum possible value
max	float	10	maximum possible value
step	float	1	increment step
precision	float	number of digits after the decimal of step value	The number of digits shown after the decimal. Defaults to the number of digits after the decimal of step value.
orientation	string	'horizontal'	set the orientation. Accepts 'vertical' or 'horizontal'
value	float,array	5	initial value. Use array to have a range slider.
range	bool	false	make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value.
selection	string	'before'	selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles
tooltip	string	'show'	whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'
tooltip_separator	string	':'	tooltip separator
tooltip_split	bool	false	if false show one tootip if true show two tooltips one for each handler
handle	string	'round'	handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'
reversed	bool	false	whether or not the slider should be reversed
enabled	bool	true	whether or not the slider is initially enabled
formatter	function	returns the plain value	formatter callback. Return the value wanted to be displayed in the tooltip
natural_arrow_keys	bool	false	The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.

Functions

NOTE: Optional parameters are italicized.

Function	Parameters	Description
getValue	---	Get the current value from the slider
setValue	newValue, triggerSlideEvent	Set a new value for the slider. If optional triggerSlideEvent parameter is true, the 'slide' event will be triggered.
destroy	---	Properly clean up and remove the slider instance
disable	---	Disables the slider and prevents the user from changing the value
enable	---	Enables the slider
toggle	---	Toggles the slider between enabled and disabled
isEnabled	---	Returns true if enabled, false if disabled
setAttribute	attribute, value	Updates the slider's attributes
getAttribute	attribute	Get the slider's attributes
refresh	---	Refreshes the current slider
on	eventType, callback	When the slider event eventType is triggered, the callback function will be invoked

Events

Event	Description
slide	This event fires when the slider is dragged
slideStart	This event fires when dragging starts
slideStop	This event fires when the dragging stops
slideEnabled	This event fires when the slider is enabled
slideDisabled	This event fires when the slider is disabled

Version Bumping (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

Other Platforms & Libraries

Maintainers

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

FAQs

What is bootstrap-slider?

Is bootstrap-slider well maintained?

Package last updated on 14 Nov 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install