# 🎢 Vue Slide Bar A Simple Vue Slider Bar Component. # Document & Demo Page - ### [Document & Demo](https://biigpongsatorn.github.io/#/vue-slide-bar) - ### [vue-slide-bar-demo-page](https://frncsdrk.github.io/vue-slide-bar-demo-page/) # Install ```sh npm install vue-slide-bar --save ``` or ```sh yarn add vue-slide-bar ``` # Usage ```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 ``` ## Custom Style & Min-Max

```html ``` ## Loading

```html ``` ## Options ### Props | 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 | ### Events | Name | Description | | --------------|--------------| | input | triggered on value change | | callbackRange | triggered on range value change | | dragStart | triggered on start drag | | dragEnd | triggered on stop drag | ### Slot | Name | Description | | --------------|--------------| | tooltip | Customize the tooltip slot.| [#](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 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. ``` ## License [MIT](LICENSE) Developed with ❤️ and ☕️

Value: {{slider.value}}

Label: {{rangeValue.label}}

Value: {{value2}}

Loading: {{loading}}%

vue-slide-bar

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past