{"id":13538754,"url":"https://github.com/seiyria/bootstrap-slider","last_synced_at":"2025-05-12T13:19:44.516Z","repository":{"id":9279252,"uuid":"11111023","full_name":"seiyria/bootstrap-slider","owner":"seiyria","description":"A slider control for Bootstrap 3 \u0026 4.","archived":false,"fork":false,"pushed_at":"2024-09-09T17:17:04.000Z","size":17936,"stargazers_count":2984,"open_issues_count":103,"forks_count":1133,"subscribers_count":101,"default_branch":"master","last_synced_at":"2025-05-12T13:19:36.429Z","etag":null,"topics":["bootstrap","javascript","slider"],"latest_commit_sha":null,"homepage":"http://seiyria.github.io/bootstrap-slider/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seiyria.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-07-02T00:25:54.000Z","updated_at":"2025-05-07T08:37:45.000Z","dependencies_parsed_at":"2024-06-18T10:55:49.947Z","dependency_job_id":"4abb3be0-e76b-4d1d-890e-8c77c0ca5179","html_url":"https://github.com/seiyria/bootstrap-slider","commit_stats":{"total_commits":986,"total_committers":146,"mean_commits":"6.7534246575342465","dds":0.6967545638945234,"last_synced_commit":"a7eab931f043cecd52238cea6e487b56098dcba0"},"previous_names":[],"tags_count":190,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seiyria%2Fbootstrap-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seiyria%2Fbootstrap-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seiyria%2Fbootstrap-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seiyria%2Fbootstrap-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seiyria","download_url":"https://codeload.github.com/seiyria/bootstrap-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745196,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","javascript","slider"],"created_at":"2024-08-01T09:01:15.563Z","updated_at":"2025-05-12T13:19:44.450Z","avatar_url":"https://github.com/seiyria.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"bootstrap-slider [![Build Status](https://travis-ci.org/seiyria/bootstrap-slider.png?branch=master)](https://travis-ci.org/seiyria/bootstrap-slider)\n================\nOriginally began as a loose \"fork\" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.\n\nOver time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completely different.\n\n__Please ensure that you are using this library instead of the Petre version before creating issues in the repository issue tracker!!__\n\n__Starting with major release 11.0.0, we only support Bootstrap 4!__\n\nInstallation\n============\nWant to use bower? `bower install seiyria-bootstrap-slider`\n\nWant to use npm? `npm install bootstrap-slider`\n\nWant to get it from a CDN? https://cdnjs.com/libraries/bootstrap-slider\n\nBasic Setup\n============\nGrab 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!\n\nRemember to load the plugin code after loading the Bootstrap CSS and JQuery.\n\n__JQuery is optional and the plugin can operate with or without it.__\n\nLook below to see an example of how to interact with the non-JQuery interface.\n\nSupported Browsers\n========\n__We only support modern browsers!!! Basically, anything below IE10 is not compatible with this plugin!__\n\nExamples\n========\nYou can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/).\n\nUsing bootstrap-slider (with JQuery)\n======================\n\n### Using `.slider` namespace\nCreate an input element and call .slider() on it:\n\n```js\n// Instantiate a slider\nvar mySlider = $(\"input.slider\").slider();\n\n// Call a method on the slider\nvar value = mySlider.slider('getValue');\n\n// For non-getter methods, you can chain together commands\n\tmySlider\n\t\t.slider('setValue', 5)\n\t\t.slider('setValue', 7);\n```\n\n### Using `.bootstrapSlider` namespace\nCreate an input element and call .bootstrapSlider() on it:\n\n```js\n// Instantiate a slider\nvar mySlider = $(\"input.slider\").bootstrapSlider();\n\n// Call a method on the slider\nvar value = mySlider.bootstrapSlider('getValue');\n\n// For non-getter methods, you can chain together commands\n\tmySlider\n\t\t.bootstrapSlider('setValue', 5)\n\t\t.bootstrapSlider('setValue', 7);\n```\n\nUsing bootstrap-slider (via `data-provide`-API)\n======================\n\nCreate an input element with the `data-provide=\"slider\"` attribute automatically\nturns it into a slider. Options can be supplied via `data-slider-` attributes.\n\n```html\n\u003cinput\n\ttype=\"text\"\n\tname=\"somename\"\n\tdata-provide=\"slider\"\n\tdata-slider-ticks=\"[1, 2, 3]\"\n\tdata-slider-ticks-labels='[\"short\", \"medium\", \"long\"]'\n\tdata-slider-min=\"1\"\n\tdata-slider-max=\"3\"\n\tdata-slider-step=\"1\"\n\tdata-slider-value=\"3\"\n\tdata-slider-tooltip=\"hide\"\n\u003e\n```\n\nWhat if there is already a _slider_ plugin bound to the JQuery namespace?\n======================\n\nIf 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.\n\n```js\n// Instantiate a slider\nvar mySlider = $(\"input.slider\").bootstrapSlider();\n\n// Call a method on the slider\nvar value = mySlider.bootstrapSlider('getValue');\n\n// For non-getter methods, you can chain together commands\n\tmySlider\n\t\t.bootstrapSlider('setValue', 5)\n\t\t.bootstrapSlider('setValue', 7);\n```\n\nUsing bootstrap-slider (without JQuery)\n======================\n\nCreate an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.\n\n```js\n// Instantiate a slider\nvar mySlider = new Slider(\"input.slider\", {\n\t// initial options object\n});\n\n// Call a method on the slider\nvar value = mySlider.getValue();\n\n// For non-getter methods, you can chain together commands\nmySlider\n\t.setValue(5)\n\t.setValue(7);\n```\n\nUsing as CommonJS module\n=======\nbootstrap-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.\n\n```js\nvar Slider = require(\"bootstrap-slider\");\n\nvar mySlider = new Slider();\n```\n\nHow do I exclude the optional JQuery dependency from my build?\n=======\n### Browserify\n__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):\n\n```BASH\nbrowserify --im -u jquery main.js \u003e bundle.js\n```\n### Webpack\nTo 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:\n\n```js\nresolve: {\n    alias: {\n         \"jquery\": path.join(__dirname, \"./jquery-stub.js\")\n    }\n}\n```\n\n### [Webpack-encore](https://symfony.com/doc/current/frontend.html)\n```js\nEncore\n    // directory where compiled assets will be stored\n    .setOutputPath('public/build/')\n    // ...\n    webpack-encore config\n    ...\n;\n\nconst config = Encore.getWebpackConfig();\nconfig.resolve.alias[\"jquery\"] = path.resolve(__dirname, 'assets/js/jquery-stub.js');\nmodule.exports = config\n```\n\nThen 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.\n\n```js\n// Path: ./jquery-stub.js\nmodule.exports = null;\n```\n\n### Other\nPlease see the documentation for the specific module loader you are using to find out how to exclude dependencies.\n\nOptions\n=======\nOptions 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.\n\n\n| Name | Type |\tDefault |\tDescription |\n| ---- |:----:|:-------:|:----------- |\n| id | string | '' | set the id of the slider element when it's created |\n| min |\tfloat\t| 0 |\tminimum possible value |\n| max |\tfloat |\t10 |\tmaximum possible value |\n| step | float |\t1 |\tincrement step |\n| precision | float |\tnumber of digits after the decimal of _step_ value |\tThe number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |\n| orientation |\tstring | 'horizontal' |\tset the orientation. Accepts 'vertical' or 'horizontal' |\n| value |\tfloat, array |\t5\t| initial value. Use array to have a range slider. |\n| range |\tbool |\tfalse\t| make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |\n| selection |\tstring |\t'before' |\tselection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |\n| tooltip |\tstring |\t'show' |\twhether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |\n| tooltip_split |\tbool |\tfalse |\tif false show one tootip if true show two tooltips one for each handler |\n| tooltip_position |\tstring |\tnull |\tPosition 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. |\n| handle |\tstring |\t'round' |\thandle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |\n| reversed | bool | false | whether or not the slider should be reversed |\n| 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'`) |\n| enabled | bool | true | whether or not the slider is initially enabled |\n| formatter |\tfunction |\treturns the plain value |\tformatter 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.  |\n| 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. |\n| 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. |\n| 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. |\n| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |\n| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |\n| 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 |\n| 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. |\n| focus | bool | false | Focus the appropriate slider handle after a value change. |\n| labelledby | string, array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |\n| rangeHighlights | array | [] | Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}]. |\n| lock_to_ticks | bool | false | Lock the selection to the values defined at ticks array. |\n\nFunctions\n=========\n__NOTE:__ Optional parameters are italicized.\n\n| Function | Parameters | Description |\n| -------- | ----------- | ----------- |\n| getValue | --- | Get the current value from the slider |\n| 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.|\n| getElement | --- | Get the div slider element |\n| destroy | --- | Properly clean up and remove the slider instance |\n| disable | ---| Disables the slider and prevents the user from changing the value |\n| enable | --- | Enables the slider |\n| toggle | --- | Toggles the slider between enabled and disabled |\n| isEnabled | --- |Returns true if enabled, false if disabled |\n| setAttribute | attribute, value | Updates the slider's [attributes](#options) |\n| getAttribute | attribute | Get the slider's [attributes](#options) |\n| 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 })`. |\n| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked |\n| off | eventType, callback | Removes the callback function from the slider event _eventType_ |\n| relayout | --- | Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden. |\n\nEvents\n======\n| Event | Description | Value |\n| ----- | ----------- | ----- |\n| slide | This event fires when the slider is dragged | The new slider value |\n| slideStart | This event fires when dragging starts | The new slider value |\n| slideStop | This event fires when the dragging stops or has been clicked on | The new slider value |\n| change | This event fires when the slider value has changed | An object with 2 properties: \"oldValue\" and \"newValue\" |\n| slideEnabled | This event fires when the slider is enabled | N/A |\n| slideDisabled | This event fires when the slider is disabled | N/A |\n\n\nHow Do I Run This Locally?\n======\n- Clone the repository\n- Run `nvm use` in your Terminal to switch to the proper Node/NPM version\n- Once you are on specified Node version, run `npm install`\n- Install the Grunt CLI: `npm install grunt-cli -g`\n- Type `grunt dev` to launch browser window with Examples page\n\nGrunt Tasks\n======\nThis plugin uses Grunt as its command-line task runner.\n\nTo install the Grunt CLI, type `npm install grunt-cli -g`.\n\nTo execute any of the commands, type `grunt \u003ctask-name\u003e` in your terminal instance.\n\nThe following is a list of the commonly-used command line tasks:\n\n* `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\n\tbrowser window will auto-refresh.\n* `grunt production`: Generates the `/dist` directory with minified and unminified assetts.\n* `grunt dev`: Alias for `grunt development`\n* `grunt prod`: Alias for `grunt production`\n* `grunt build`: Transpiles JavaScript source via Babel and compiles LESS source to CSS to `temp` directory.\n* `grunt lint`: Runs JSLint on the JavaScript source code files, and SASS-Lint on the SASS source code files.\n* `grunt test`: Runs unit tests contained in `/test` directory via Jasmine 2.x.x\n\n\nVersion Bumping and Publishing (Maintainers Only)\n=======\nFor versioning rules, we follow the [Semver convention](https://semver.org/).\n\nTo do the following release tasks:\n* bump the version\n* publish a new version to NPM\n* update the `gh-pages` branch\n* push a new `dist` bundle to the `master` branch on the remote `origin`\n* push new tags to the remote `origin`\n\nType the following command:\n\n`npm run release \u003cpatch|minor|major\u003e`\n\nIf you do not specify a version bump type, the script will automatically defer to a patch bump.\n\nUpdating Github.io Page\n===========================\nThe Github.io page can be automatically updated by running the following command:\n\n`npm run update-gh-pages`\n\nThis command will handle generating the latest versions of the JS/CSS and index.html page, and push them to the `gh-pages` branch.\n\nOther Platforms \u0026 Libraries\n===========================\n- [Ruby on Rails](https://github.com/YourCursus/bootstrap-slider-rails)\n- [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [#81](https://github.com/seiyria/bootstrap-slider/issues/81))\n- [AngularJS](https://github.com/seiyria/angular-bootstrap-slider)\n- [Angular](https://github.com/moritzvieli/ngx-bootstrap-slider) ([@moritzvieli](https://github.com/moritzvieli))\n- [EmberJS](https://github.com/lifegadget/ui-slider) ([@ksnyde](https://github.com/ksnyde))\n- [ReactJS](https://github.com/brownieboy/react-bootstrap-slider)\n- [NuGet](https://www.nuget.org/packages/bootstrap-slider/) ([@ChrisMissal](https://github.com/ChrisMissal))\n- [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider)\n- [Maven](http://mvnrepository.com/artifact/org.webjars.bower/seiyria-bootstrap-slider)\n- [Vue.js](https://github.com/pimlie/vue-bootstrap-slider) ([@pimlie](https://github.com/pimlie))\n\nMaintainers\n============\n- Kyle Kemp\n\t* Twitter: [@seiyria](https://twitter.com/seiyria)\n\t* Github: [seiyria](https://github.com/seiyria)\n- Rohit Kalkur\n\t* Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary)\n\t* Github: [rovolution](https://github.com/rovolution)\n\nLooking for a Premium UI Kit?\n============\n\nAdminKit is a developer friendly \u0026 highly customizable Bootstrap 5 admin template featuring hundreds of UI components, forms, tables, charts and icons. [Learn more](https://gumroad.com/a/709465203).\n\n[![AdminKit - Premium Bootstrap 5 admin template](https://assets.adminkit.io/banners/partners/adminkit-1200x628.jpg)](https://gumroad.com/a/709465203)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseiyria%2Fbootstrap-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseiyria%2Fbootstrap-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseiyria%2Fbootstrap-slider/lists"}