Simple Vue Slide Bar Component
npm install vue-slide-barA Simple Vue Slider Bar Component.
``sh`
npm install vue-slide-bar --save`
orsh`
yarn add vue-slide-bar
javascript
// main.js
import Vue from 'vue'
import VueSlideBar from 'vue-slide-bar'Vue.component('VueSlideBar', VueSlideBar)
`or
`javascript
// xxx.vue
import VueSlideBar from 'vue-slide-bar'export default {
components: {
VueSlideBar
}
}
`Simple

`html
`With Label

`html
v-model="slider.value"
:data="slider.data"
:range="slider.range"
:labelStyles="{ color: '#4a4a4a', backgroundColor: '#4a4a4a' }"
:processStyle="{ backgroundColor: '#d8d8d8' }"
@callbackRange="callbackRange">

Value: {{slider.value}}
Label: {{rangeValue.label}}
`Custom Style & Min-Max

`html
v-model="value2"
:min="1"
:max="10"
:processStyle="slider.processStyle"
:lineHeight="slider.lineHeight"
:tooltipStyles="{ backgroundColor: 'red', borderColor: 'red' }">
Value: {{value2}}
`Loading

`html
v-model="loading"
:showTooltip="false"
:lineHeight="20"
:isDisabled="true"/>
Loading: {{loading}}%
`Options
$3
| Props | Type | Default | Description |
| ----------- |:--------------| ---------|--------------|
| v-model | Number,String | 0 | Initial value (v-model)|
| min | Number | 0 | Minimum value |
| max | Number | 100 | Maximum value |
| process-style | Object | null | Process bar style. |
| tooltip-styles | Object | null | Tooltip style. |
| label-style | Object | null | Label style. |
| data | Array | null | Custom data. |
| is-disabled | Boolean | false | Flag for disable slider bar |
| draggable | Boolean | true | Flag for active/disable draggable |
| show-tooltip | Boolean | true | Flag display tooltip |
| icon-width | Number | 20 | Icon width |
| line-height | Number | 5 | Line height |
| speed | Number | 0.5 | Transition time |
| paddingless | Boolean | false | Remove padding and min-height |$3
| Name | Description |
| --------------|--------------|
| input | triggered on value change |
| callbackRange | triggered on range value change |
| dragStart | triggered on start drag |
| dragEnd | triggered on stop drag |$3
| Name | Description |
| --------------|--------------|
| tooltip | Customize the tooltip slot.|# When using the template element as a slot, can add special properties
slot-scope to get the value.Contributing
1. Fork this repository.
2. Create new branch with feature name.
3. Run npm install and npm run dev.
4. Create your feature.
5. Commit and set commit message with feature name.
6. Push your code to your fork repository.
7. Create pull request. 🙂Support
`
If you like this project, You can support me with starring ⭐ this repository.
``Developed with ❤️ and ☕️