StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.9 KiB
99 lines
2.9 KiB
4 years ago
|
# 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
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<b-form-slider :value="value" @slide-start="slideStart" @slide-stop="slideStop"></b-form-slider>
|
||
|
|
<p>Slider has value {{ value }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
value: 5
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
slideStart () {
|
||
|
|
console.log('slideStarted')
|
||
|
|
},
|
||
|
|
slideStop () {
|
||
|
|
console.log('slideStopped')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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
|
||
|
|
<b-form-slider ref="mySlider"></b-form-slider>
|
||
|
|
|
||
|
|
const mySlider = this.$refs.mySlider
|
||
|
|
mySlider.slider.refresh()
|
||
|
|
```
|