Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pimlie/vue-bootstrap-slider
Vue.js bindings for seiyria/bootstrap-slider
https://github.com/pimlie/vue-bootstrap-slider
bootstrap bootstrap-slider vue vue-bootstrap-slider
Last synced: 2 months ago
JSON representation
Vue.js bindings for seiyria/bootstrap-slider
- Host: GitHub
- URL: https://github.com/pimlie/vue-bootstrap-slider
- Owner: pimlie
- License: other
- Created: 2017-06-30T01:23:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-05T12:54:17.000Z (almost 6 years ago)
- Last Synced: 2024-10-08T12:21:10.605Z (3 months ago)
- Topics: bootstrap, bootstrap-slider, vue, vue-bootstrap-slider
- Language: JavaScript
- Homepage:
- Size: 732 KB
- Stars: 16
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
> :warning: Please note this package is just a wrapper and not really a vue component. If you are looking for a real vue slider component take a look at [vue-slider-component](https://github.com/NightCatSama/vue-slider-component) which recently added support for custom themes
# Vue.js Bootstrap Slider
[](https://npmjs.com/package/vue-bootstrap-slider)
[](https://npmjs.com/package/vue-bootstrap-slider)
> Easily use [seiyria's Bootstrap Slider component](https://github.com/seiyria/bootstrap-slider) in Vue.js
Click [here](https://pimlie.github.io/vue-bootstrap-slider/example.html) for a live example
## How to install
Install from npm with:
```
npm install --save vue-bootstrap-slider
```
The default export of this package is a VuePlugin.
```js
import bFormSlider from 'vue-bootstrap-slider';
Vue.use(bFormSlider)
```
if you wish to import the component you can use:
```js
import bFormSlider from 'vue-bootstrap-slider/es/form-slider';
```
Next import the bootstrap-slider styles (or use less or sass):
```js
import 'bootstrap-slider/dist/css/bootstrap-slider.css'
```
## Options
### `debounce`
- Default: `0` milliseconds
The events triggered by `bootstrap-slider` originates from mouse-move events and can easily flood your listeners. Setting this value will debounce the events trigger. You can also just debounce or throttle your own listener
### `trigger-slide-event`
- Default: `false`
If the slide event should be triggered when programmatically setting the value
### `trigger-change-event`
- Default: `false`
If the change (and input) event should be triggered when programmatically setting the value
See [bootstrap-slider](https://github.com/seiyria/bootstrap-slider) for a full list of options
> :exclamation: When listening to slider events, listen to the kebab-case'd event name and not the camelCase'd. E.g. listen for `@slide-start` and not for `@slideStart`
## Example
```html
Slider has value {{ value }}
export default {
data () {
return {
value: 5
}
},
methods: {
slideStart () {
console.log('slideStarted')
},
slideStop () {
console.log('slideStopped')
}
}
}
```
### Exclude jQuery dependency
By default seiyria/bootstrap-slider requires jquery which means that if you include this package you will also add jquery to your project. If you do not use jquery anywhere in your project, check [here](https://github.com/seiyria/bootstrap-slider#how-do-i-exclude-the-optional-jquery-dependency-from-my-build) how to prevent the full jquery library from being added to your project build.
If you are using `nuxt` you can set the following in your `nuxt.config.js`:
```js
{
build: {
extend (config, ctx) {
config.resolve.alias['jquery'] = '~components/jquery-stub.js'
}
}
}
```
### Direct access to the Slider object from your component
```js
const mySlider = this.$refs.mySlider
mySlider.slider.refresh()
```