bootstrap-slider

What is bootstrap-slider?

The bootstrap-slider npm package is a flexible and customizable slider component for Bootstrap. It allows users to create sliders with a wide range of options, including vertical and horizontal orientations, range sliders, and more. It is useful for creating interactive UI elements for selecting values or ranges.

What are bootstrap-slider's main functionalities?

Basic Slider

This code initializes a basic slider using the bootstrap-slider package. The slider can be customized with various options.

$(document).ready(function() {
  $('#slider').slider();
});

Range Slider

This code initializes a range slider, allowing users to select a range of values between 20 and 80.

$(document).ready(function() {
  $('#rangeSlider').slider({
    range: true,
    value: [20, 80]
  });
});

Vertical Slider

This code initializes a vertical slider with a range from 0 to 100 and a default value of 50.

$(document).ready(function() {
  $('#verticalSlider').slider({
    orientation: 'vertical',
    min: 0,
    max: 100,
    value: 50
  });
});

Slider with Tooltip

This code initializes a slider that always shows a tooltip displaying the current value.

$(document).ready(function() {
  $('#tooltipSlider').slider({
    tooltip: 'always'
  });
});

Other packages similar to bootstrap-slider

nouislider

noUiSlider is a lightweight JavaScript range slider with full touch support. It is highly customizable and supports a wide range of features, including multi-handle sliders, tooltips, and more. Compared to bootstrap-slider, noUiSlider offers more customization options and a smaller footprint.

ion-rangeslider

Ion.RangeSlider is a powerful and flexible range slider plugin. It supports single and double sliders, custom values, and a variety of skins. It is similar to bootstrap-slider but offers additional features like custom value formatting and better mobile support.

rc-slider

rc-slider is a React component for creating sliders. It supports a wide range of features, including range sliders, vertical sliders, and custom handles. It is specifically designed for use with React, making it a good choice for React developers looking for a slider component.

README

bootstrap-slider

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

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

Starting with major release 11.0.0, we only support Bootstrap 4!

Installation

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

Basic Setup

Grab the compiled JS/CSS (minified or non-minified versions) from the /dist directory, load them 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 IE10 is not compatible with this plugin!

Examples

You can see all of our API examples here.

Using bootstrap-slider (with JQuery)

Using .slider namespace

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

Using .bootstrapSlider namespace

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

// 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 (via data-provide-API)

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

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 provide an alternative namespace bootstrapSlider and will emit a console warning telling you the slider namespace has already been taken and will encourage you to use the alternate namespace instead. If the slider namespace is available however, the bootstrapSlider namespace will not exist.

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

How do I exclude the optional JQuery dependency from my build?

Browserify

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 --im -u jquery main.js > bundle.js

Webpack

To exclude JQuery from your Webpack build, you will have to go into the Webpack config file for your specific project and add something like the following to your resolve.alias section:

resolve: {
    alias: {
         "jquery": path.join(__dirname, "./jquery-stub.js")
    }
}

Then in your project, you will have to create a stub module for jquery that exports a null value. Whenever require("jquery") is mentioned in your project, it will load this stubbed module.

// Path: ./jquery-stub.js
module.exports = null;

Other

Please see the documentation for the specific module 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_split	bool	false	if false show one tootip if true show two tooltips one for each handler
tooltip_position	string	null	Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider.
handle	string	'round'	handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'
reversed	bool	false	whether or not the slider should be reversed
rtl	string, bool	'auto'	whether or not the slider should be shown in rtl mode. Accepts true, false, 'auto'. Default 'auto' : use actual direction of HTML (dir='rtl')
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, useful for string values. If a string is returned it will be indicated in an aria-valuetext attribute.
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.
ticks	array	[ ]	Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options.
ticks_positions	array	[ ]	Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent.
ticks_labels	array	[ ]	Defines the labels below the tick marks. Accepts HTML input.
ticks_snap_bounds	float	0	Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds.
ticks_tooltip	bool	false	Used to allow for a user to hover over a given tick to see it's value. Useful if custom formatter passed in
scale	string	'linear'	Set to 'logarithmic' to use a logarithmic scale. Logarithmic scales will be calculated based on the difference between min to max; e.g. (0..10000) (-100..9900) both have a net range of 10001 and will slide in the same net increments.
focus	bool	false	Focus the appropriate slider handle after a value change.
labelledby	string, array	null	ARIA labels for the slider handle's, Use array for multiple values in a range slider.
rangeHighlights	array	[]	Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}].
lock_to_ticks	bool	false	Lock the selection to the values defined at ticks array.

Functions

NOTE: Optional parameters are italicized.

Function	Parameters	Description
getValue	---	Get the current value from the slider
setValue	newValue, triggerSlideEvent, triggerChangeEvent	Set a new value for the slider. If optional triggerSlideEvent parameter is true, 'slide' events will be triggered. If optional triggerChangeEvent parameter is true, 'change' events will be triggered. This function takes newValue as either a Number, String, Array. If the value is of type String it must be convertable to an integer or it will throw an error.
getElement	---	Get the div slider element
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	options	Refreshes the current slider and resets the slider's value to its default value on initial setup. To override this behaviour and instead maintain the slider's current value, pass the optional options parameter with the property useCurrentValue set to true (eg. refresh({ useCurrentValue: true }).
on	eventType, callback	When the slider event eventType is triggered, the callback function will be invoked
off	eventType, callback	Removes the callback function from the slider event eventType
relayout	---	Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden.

Events

Event	Description	Value
slide	This event fires when the slider is dragged	The new slider value
slideStart	This event fires when dragging starts	The new slider value
slideStop	This event fires when the dragging stops or has been clicked on	The new slider value
change	This event fires when the slider value has changed	An object with 2 properties: "oldValue" and "newValue"
slideEnabled	This event fires when the slider is enabled	N/A
slideDisabled	This event fires when the slider is disabled	N/A

How Do I Run This Locally?

• 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

Grunt Tasks

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 SASS/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 files, and SASS-Lint on the SASS source code files.
• grunt test: Runs unit tests contained in /test directory via Jasmine 2.x.x

Version Bumping and Publishing (Maintainers Only)

For versioning rules, we follow the Semver convention.

To do the following release tasks:

• bump the version
• publish a new version to NPM
• update the gh-pages branch
• push a new dist bundle to the master branch on the remote origin
• push new tags to the remote origin

Type the following command:

npm run release <patch|minor|major>

If you do not specify a version bump type, the script will automatically defer to a patch bump.

Updating Github.io Page

The Github.io page can be automatically updated by running the following command:

npm run update-gh-pages

This command will handle generating the latest versions of the JS/CSS and index.html page, and push them to the gh-pages branch.

Other Platforms & Libraries

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

Maintainers

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