PHPackages seiyria/bootstrap-slider - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. seiyria/bootstrap-slider ActiveLibrary[Utility & Helpers](/categories/utility) 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(11y ago)023.4k↓35%1Apache 2.0JavaScript Since May 11Pushed 10y ago1 watchersCompare [ Source](https://github.com/jqmodules/bootstrap-slider)[ Packagist](https://packagist.org/packages/seiyria/bootstrap-slider)[ Docs](https://github.com/seiyria/bootstrap-slider)[ RSS](/packages/seiyria-bootstrap-slider/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (42)Used By (1) bootstrap-slider [![Build Status](https://camo.githubusercontent.com/0a454bc247c097e0fbe90fbe3020d6919bbb6be2089ee579111b69dfb44f6a1f/68747470733a2f2f7472617669732d63692e6f72672f736569797269612f626f6f7473747261702d736c696465722e706e673f6272616e63683d6d6173746572)](https://travis-ci.org/seiyria/bootstrap-slider) ======================================================================================================================================================================================================================================================================================================================== [](#bootstrap-slider-) Originally began as a loose "fork" of bootstrap-slider found on 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 ============ [](#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 =========== [](#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 ================== [](#supported-browsers) **We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!** Examples ======== [](#examples) You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/). Using bootstrap-slider (with JQuery) ==================================== [](#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? ========================================================================= [](#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) ======================================= [](#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 ======================== [](#using-as-commonjs-module) bootstrap-slider can be loaded as a CommonJS module via [Browserify](https://github.com/substack/node-browserify), [Webpack](https://github.com/webpack/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) 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. NameTypeDefaultDescriptionidstring''set the id of the slider element when it's createdminfloat0minimum possible valuemaxfloat10maximum possible valuestepfloat1increment stepprecisionfloatnumber of digits after the decimal of *step* valueThe number of digits shown after the decimal. Defaults to the number of digits after the decimal of *step* value.orientationstring'horizontal'set the orientation. Accepts 'vertical' or 'horizontal'valuefloat,array5initial value. Use array to have a range slider.rangeboolfalsemake range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value.selectionstring'before'selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handlestooltipstring'show'whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'tooltip\_splitboolfalseif false show one tootip if true show two tooltips one for each handlerhandlestring'round'handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'reversedboolfalsewhether or not the slider should be reversedenabledbooltruewhether or not the slider is initially enabledformatterfunctionreturns the plain valueformatter callback. Return the value wanted to be displayed in the tooltipnatural\_arrow\_keysboolfalseThe 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.ticksarray\[ \]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\_positionsarray\[ \]Defines the positions of the tick values in percentages. The first value should alwasy be 0, the last value should always be 100 percent.ticks\_labelsarray\[ \]Defines the labels below the tick marks. Accepts HTML input.ticks\_snap\_boundsfloat0Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds.scalestring'linear'Set to 'logarithmic' to use a logarithmic scale.focusboolfalseFocus the appropriate slider handle after a value change.Functions ========= [](#functions) **NOTE:** Optional parameters are italicized. FunctionParametersDescriptiongetValue---Get the current value from the slidersetValuenewValue, *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` or `Array`.destroy---Properly clean up and remove the slider instancedisable---Disables the slider and prevents the user from changing the valueenable---Enables the slidertoggle---Toggles the slider between enabled and disabledisEnabled---Returns true if enabled, false if disabledsetAttributeattribute, valueUpdates the slider's [attributes](#options)getAttributeattributeGet the slider's [attributes](#options)refresh---Refreshes the current slideroneventType, callbackWhen the slider event *eventType* is triggered, the callback function will be invokedrelayout---Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden.Events ====== [](#events) EventDescriptionValueslideThis event fires when the slider is draggedThe new slider valueslideStartThis event fires when dragging startsThe new slider valueslideStopThis event fires when the dragging stops or has been clicked onThe new slider valuechangeThis event fires when the slider value has changedAn object with 2 properties: "oldValue" and "newValue"slideEnabledThis event fires when the slider is enabledN/AslideDisabledThis event fires when the slider is disabledN/AVersion Bumping and Publishing (Maintainers Only) ================================================= [](#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](https://github.com/vojtajina/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 =============================== [](#other-platforms--libraries) - [Ruby on Rails](https://github.com/stationkeeping/bootstrap-slider-rails) - [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [\#81](https://github.com/seiyria/bootstrap-slider/issues/81)) - [AngularJS](https://github.com/seiyria/angular-bootstrap-slider) - [NuGet](https://www.nuget.org/packages/bootstrap.slider) - [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider) Maintainers =========== [](#maintainers) - Kyle Kemp - Twitter: [@seiyria](https://twitter.com/seiyria) - Github: [seiyria](https://github.com/seiyria) - Rohit Kalkur - Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary) - Github: [rovolution](https://github.com/rovolution) ### Health Score 39 — LowBetter than 86% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity26 Limited adoption so far Community22 Small or concentrated contributor base Maturity75 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~9 days Recently: every ~2 days Total 38 Last Release 4055d ago Major Versions 3.1.0 → v4.0.02014-08-29 ### Community Maintainers ![](https://www.gravatar.com/avatar/c5b5b41a27c22c02fd7a9e66995586a7bc4851492eba68aa9b669faed3b9ccb9?d=identicon)[jqutils](/maintainers/jqutils) --- Top Contributors [![rovolution](https://avatars.githubusercontent.com/u/437318?v=4)](https://github.com/rovolution "rovolution (132 commits)")[![seiyria](https://avatars.githubusercontent.com/u/763609?v=4)](https://github.com/seiyria "seiyria (110 commits)")[![rahatarmanahmed](https://avatars.githubusercontent.com/u/3174006?v=4)](https://github.com/rahatarmanahmed "rahatarmanahmed (17 commits)")[![MelleB](https://avatars.githubusercontent.com/u/265437?v=4)](https://github.com/MelleB "MelleB (16 commits)")[![zonia3000](https://avatars.githubusercontent.com/u/5459334?v=4)](https://github.com/zonia3000 "zonia3000 (13 commits)")[![raulfortes](https://avatars.githubusercontent.com/u/97687?v=4)](https://github.com/raulfortes "raulfortes (8 commits)")[![jkrehm](https://avatars.githubusercontent.com/u/999845?v=4)](https://github.com/jkrehm "jkrehm (5 commits)")[![pmoncunill](https://avatars.githubusercontent.com/u/6929559?v=4)](https://github.com/pmoncunill "pmoncunill (5 commits)")[![j0hnsmith](https://avatars.githubusercontent.com/u/118963?v=4)](https://github.com/j0hnsmith "j0hnsmith (4 commits)")[![ChrisAntaki](https://avatars.githubusercontent.com/u/1216762?v=4)](https://github.com/ChrisAntaki "ChrisAntaki (3 commits)")[![engwansong](https://avatars.githubusercontent.com/u/499767?v=4)](https://github.com/engwansong "engwansong (3 commits)")[![inamiy](https://avatars.githubusercontent.com/u/138476?v=4)](https://github.com/inamiy "inamiy (3 commits)")[![James1x0](https://avatars.githubusercontent.com/u/6146261?v=4)](https://github.com/James1x0 "James1x0 (3 commits)")[![jbogdani](https://avatars.githubusercontent.com/u/1449293?v=4)](https://github.com/jbogdani "jbogdani (3 commits)")[![andredurao](https://avatars.githubusercontent.com/u/116623?v=4)](https://github.com/andredurao "andredurao (2 commits)")[![dnelson](https://avatars.githubusercontent.com/u/3587498?v=4)](https://github.com/dnelson "dnelson (2 commits)")[![dzaman](https://avatars.githubusercontent.com/u/3486978?v=4)](https://github.com/dzaman "dzaman (2 commits)")[![jrnewell](https://avatars.githubusercontent.com/u/6483213?v=4)](https://github.com/jrnewell "jrnewell (2 commits)")[![kirilvit](https://avatars.githubusercontent.com/u/3276325?v=4)](https://github.com/kirilvit "kirilvit (2 commits)")[![lamplightdev](https://avatars.githubusercontent.com/u/898995?v=4)](https://github.com/lamplightdev "lamplightdev (2 commits)") --- Tags javascriptcssbootstrapslider ### Embed Badge ![Health badge](/badges/seiyria-bootstrap-slider/health.svg) ``` [![Health](https://phpackages.com/badges/seiyria-bootstrap-slider/health.svg)](https://phpackages.com/packages/seiyria-bootstrap-slider) ``` ### Alternatives [matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M336](/packages/matthiasmullie-minify)[snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[nostalgiaz/bootstrap-switch Turn checkboxes and radio buttons into toggle switches. 5.0k362.3k4](/packages/nostalgiaz-bootstrap-switch)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[stolz/assets An ultra-simple-to-use assets management library 296519.2k8](/packages/stolz-assets) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)