1bootstrap-slider [![Build Status](https://travis-ci.org/seiyria/bootstrap-slider.png?branch=master)](https://travis-ci.org/seiyria/bootstrap-slider) 2================ 3Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre. 4 5Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completely different. 6 7__Please ensure that you are using this library instead of the Petre version before creating issues in the repository issue tracker!!__ 8 9Installation 10============ 11Want to use bower? `bower install seiyria-bootstrap-slider` 12 13Want to use npm? `npm install bootstrap-slider` 14 15Want to get it from a CDN? https://cdnjs.com/libraries/bootstrap-slider 16 17Basic Setup 18============ 19Grab the compiled JS/CSS (minified or non-minified versions) from the [/dist](https://github.com/seiyria/bootstrap-slider/tree/master/dist) directory, load them into your web page, and everything should work! 20 21Remember to load the plugin code after loading the Bootstrap CSS and JQuery. 22 23__JQuery is optional and the plugin can operate with or without it.__ 24 25Look below to see an example of how to interact with the non-JQuery interface. 26 27Supported Browsers 28======== 29__We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!__ 30 31Examples 32======== 33You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/). 34 35Using bootstrap-slider (with JQuery) 36====================== 37 38### Using `.slider` namespace 39Create an input element and call .slider() on it: 40 41```js 42// Instantiate a slider 43var mySlider = $("input.slider").slider(); 44 45// Call a method on the slider 46var value = mySlider.slider('getValue'); 47 48// For non-getter methods, you can chain together commands 49 mySlider 50 .slider('setValue', 5) 51 .slider('setValue', 7); 52``` 53 54### Using `.bootstrapSlider` namespace 55Create an input element and call .bootstrapSlider() on it: 56 57```js 58// Instantiate a slider 59var mySlider = $("input.slider").bootstrapSlider(); 60 61// Call a method on the slider 62var value = mySlider.bootstrapSlider('getValue'); 63 64// For non-getter methods, you can chain together commands 65 mySlider 66 .bootstrapSlider('setValue', 5) 67 .bootstrapSlider('setValue', 7); 68``` 69 70Using bootstrap-slider (via `data-provide`-API) 71====================== 72 73Create an input element with the `data-provide="slider"` attribute automatically 74turns it into a slider. Options can be supplied via `data-slider-` attributes. 75 76```html 77<input 78 type="text" 79 name="somename" 80 data-provide="slider" 81 data-slider-ticks="[1, 2, 3]" 82 data-slider-ticks-labels='["short", "medium", "long"]' 83 data-slider-min="1" 84 data-slider-max="3" 85 data-slider-step="1" 86 data-slider-value="3" 87 data-slider-tooltip="hide" 88> 89``` 90 91What if there is already a _slider_ plugin bound to the JQuery namespace? 92====================== 93 94If there is already a JQuery plugin named _slider_ bound to the JQuery namespace, then this plugin will emit a console warning telling you this namespace has already been taken and will encourage you to use the alternate namespace _bootstrapSlider_ instead. 95 96```js 97// Instantiate a slider 98var mySlider = $("input.slider").bootstrapSlider(); 99 100// Call a method on the slider 101var value = mySlider.bootstrapSlider('getValue'); 102 103// For non-getter methods, you can chain together commands 104 mySlider 105 .bootstrapSlider('setValue', 5) 106 .bootstrapSlider('setValue', 7); 107``` 108 109Using bootstrap-slider (without JQuery) 110====================== 111 112Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element. 113 114```js 115// Instantiate a slider 116var mySlider = new Slider("input.slider", { 117 // initial options object 118}); 119 120// Call a method on the slider 121var value = mySlider.getValue(); 122 123// For non-getter methods, you can chain together commands 124mySlider 125 .setValue(5) 126 .setValue(7); 127``` 128 129Using as CommonJS module 130======= 131bootstrap-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. 132 133```js 134var Slider = require("bootstrap-slider"); 135 136var mySlider = new Slider(); 137``` 138 139How do I exclude the optional JQuery dependency from my build? 140======= 141### Browserify 142__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): 143 144```BASH 145browserify --im -u jquery main.js > bundle.js 146``` 147### Webpack 148To 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: 149 150```js 151resolve: { 152 alias: { 153 "jquery": path.join(__dirname, "./jquery-stub.js"); 154 } 155} 156``` 157 158Then 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. 159 160```js 161// Path: ./jquery-stub.js 162module.exports = null; 163``` 164 165### Other 166Please see the documentation for the specific module loader you are using to find out how to exclude dependencies. 167 168Options 169======= 170Options 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. 171 172 173| Name | Type | Default | Description | 174| ---- |:----:|:-------:|:----------- | 175| id | string | '' | set the id of the slider element when it's created | 176| min | float | 0 | minimum possible value | 177| max | float | 10 | maximum possible value | 178| step | float | 1 | increment step | 179| 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. | 180| orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal' | 181| value | float,array | 5 | initial value. Use array to have a range slider. | 182| 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. | 183| selection | string | 'before' | selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles | 184| tooltip | string | 'show' | whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' | 185| tooltip_split | bool | false | if false show one tootip if true show two tooltips one for each handler | 186| 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. | 187| handle | string | 'round' | handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' | 188| reversed | bool | false | whether or not the slider should be reversed | 189| rtl | bool|string | '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'`) | 190| enabled | bool | true | whether or not the slider is initially enabled | 191| 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. | 192| 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. | 193| 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. | 194| 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. | 195| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. | 196| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. | 197| 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 | 198| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. | 199| focus | bool | false | Focus the appropriate slider handle after a value change. | 200| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. | 201| rangeHighlights | array | [] | Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2}]. | 202 203Functions 204========= 205__NOTE:__ Optional parameters are italicized. 206 207| Function | Parameters | Description | 208| -------- | ----------- | ----------- | 209| getValue | --- | Get the current value from the slider | 210| 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.| 211| getElement | --- | Get the div slider element | 212| destroy | --- | Properly clean up and remove the slider instance | 213| disable | ---| Disables the slider and prevents the user from changing the value | 214| enable | --- | Enables the slider | 215| toggle | --- | Toggles the slider between enabled and disabled | 216| isEnabled | --- |Returns true if enabled, false if disabled | 217| setAttribute | attribute, value | Updates the slider's [attributes](#options) | 218| getAttribute | attribute | Get the slider's [attributes](#options) | 219| refresh | --- | Refreshes the current slider | 220| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked | 221| off | eventType, callback | Removes the callback function from the slider event _eventType_ | 222| relayout | --- | Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden. | 223 224Events 225====== 226| Event | Description | Value | 227| ----- | ----------- | ----- | 228| slide | This event fires when the slider is dragged | The new slider value | 229| slideStart | This event fires when dragging starts | The new slider value | 230| slideStop | This event fires when the dragging stops or has been clicked on | The new slider value | 231| change | This event fires when the slider value has changed | An object with 2 properties: "oldValue" and "newValue" | 232| slideEnabled | This event fires when the slider is enabled | N/A | 233| slideDisabled | This event fires when the slider is disabled | N/A | 234 235 236How Do I Run This Locally? 237====== 238- Clone the repository 239- Run `nvm use` in your Terminal to switch to the proper Node/NPM version 240- Once you are on specified Node version, run `npm install` 241- Install the Grunt CLI: `npm install grunt-cli -g` 242- Type `grunt dev` to launch browser window with Examples page 243 244Grunt Tasks 245====== 246This plugin uses Grunt as its command-line task runner. 247 248To install the Grunt CLI, type `npm install grunt-cli -g`. 249 250To execute any of the commands, type `grunt <task-name>` in your terminal instance. 251 252The following is a list of the commonly-used command line tasks: 253 254* `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 255 browser window will auto-refresh. 256* `grunt production`: Generates the `/dist` directory with minified and unminified assetts. 257* `grunt dev`: Alias for `grunt development` 258* `grunt prod`: Alias for `grunt production` 259* `grunt build`: Transpiles JavaScript source via Babel and compiles LESS source to CSS to `temp` directory. 260* `grunt lint`: Runs JSLint on the JavaScript source code files, SASS-Lint on the SASS source code files, and LESSLint on the LESS source code files. 261* `grunt test`: Runs unit tests contained in `/test` directory via Jasmine. 262 263 264Version Bumping and Publishing (Maintainers Only) 265======= 266To do the following release tasks: 267* bump the version 268* publish a new version to NPM 269* update the `gh-pages` branch 270* push a new `dist` bundle to the `master` branch on the remote `origin` 271* push new tags to the remote `origin` 272 273Type the following command: 274 275`npm run release <patch|minor|major>` 276 277If you do not specify a version bump type, the script will automatically defer to a patch bump. 278 279 280Other Platforms & Libraries 281=========================== 282- [Ruby on Rails](https://github.com/YourCursus/bootstrap-slider-rails) 283- [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [#81](https://github.com/seiyria/bootstrap-slider/issues/81)) 284- [AngularJS](https://github.com/seiyria/angular-bootstrap-slider) 285- [EmberJS](https://github.com/lifegadget/ui-slider) ([@ksnyde](https://github.com/ksnyde)) 286- [ReactJS](https://github.com/brownieboy/react-bootstrap-slider) 287- [NuGet](https://www.nuget.org/packages/bootstrap-slider/) ([@ChrisMissal](https://github.com/ChrisMissal)) 288- [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider) 289- [Maven](http://mvnrepository.com/artifact/org.webjars.bower/seiyria-bootstrap-slider) 290 291Maintainers 292============ 293- Kyle Kemp 294 * Twitter: [@seiyria](https://twitter.com/seiyria) 295 * Github: [seiyria](https://github.com/seiyria) 296- Rohit Kalkur 297 * Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary) 298 * Github: [rovolution](https://github.com/rovolution) 299