Nagging Penguin Matriarchs

    vue-slide-bar

    1.2.0 • Public • Published

    Buy Me A Coffee

    NPM version NPM downloads License Demo Build Status

    🎢 Vue Slide Bar

    A Simple Vue Slider Bar Component.

    Document & Demo Page

    Install

    npm install vue-slide-bar --save

    or

    yarn add vue-slide-bar

    Usage

    // main.js
    import Vue from 'vue'
    import VueSlideBar from 'vue-slide-bar'
     
    Vue.component('VueSlideBar', VueSlideBar)

    or

    // xxx.vue
    import VueSlideBar from 'vue-slide-bar'
     
    export default {
      components: {
        VueSlideBar
      }
    }

    Simple

    <template>
      <VueSlideBar v-model="value"/>
    </template>
     
    <script>
    export default {
      data () {
        return {
          value: 50
        }
      }
    }
    </script> 

    With Label

    <template>
      <div>
        <VueSlideBar
          v-model="slider.value"
          :data="slider.data"
          :range="slider.range"
          :labelStyles="{ color: '#4a4a4a', backgroundColor: '#4a4a4a' }"
          :processStyle="{ backgroundColor: '#d8d8d8' }"
          @callbackRange="callbackRange">
          <template slot="tooltip" slot-scope="tooltip">
            <img src="static/images/rectangle-slider.svg">
          </template>
        </VueSlideBar>
        <h2>Value: {{slider.value}}</h2>
        <h2>Label: {{rangeValue.label}}</h2>
      </div>
    </template>
     
    <script>
    import VueSlideBar from 'vue-slide-bar'
     
    export default {
      data () {
        return {
          rangeValue: {},
          slider: {
            value: 45,
            data: [
              15,
              30,
              45,
              60,
              75,
              90,
              120
            ],
            range: [
              {
                label: '15 mins'
              },
              {
                label: '30 mins',
                isHide: true
              },
              {
                label: '45 mins'
              },
              {
                label: '1 hr',
                isHide: true
              },
              {
                label: '1 hr 15 mins'
              },
              {
                label: '1 hr 30 mins',
                isHide: true
              },
              {
                label: '2 hrs'
              }
            ]
          }
        }
      },
      methods: {
        callbackRange (val) {
          this.rangeValue = val
        }
      },
      components: {
        VueSlideBar
      }
    }
    </script> 

    Custom Style & Min-Max

    <template>
      <div>
        <VueSlideBar
          v-model="value2"
          :min="1"
          :max="10"
          :processStyle="slider.processStyle"
          :lineHeight="slider.lineHeight"
          :tooltipStyles="{ backgroundColor: 'red', borderColor: 'red' }">
        </VueSlideBar>
        <h2>Value: {{value2}}</h2>
      </div>
    </template>
     
    <script>
    import VueSlideBar from 'vue-slide-bar'
     
    export default {
      data () {
        return {
          value2: 8,
          slider: {
            lineHeight: 10,
            processStyle: {
              backgroundColor: 'red'
            }
          }
        }
      },
      components: {
        VueSlideBar
      }
    }
    </script> 

    Loading

    <template>
      <div>
        <VueSlideBar
          v-model="loading"
          :showTooltip="false"
          :lineHeight="20"
          :isDisabled="true"/>
        <br>
        <button type="button" name="button" @click="startLoad()">
          Click to start load
        </button>
        <h2>Loading: {{loading}}%</h2>
      </div>
    </template>
     
    <script>
    import VueSlideBar from 'vue-slide-bar'
     
    export default {
      data () {
        return {
          loader: null,
          loading: 0
        }
      },
      methods: {
        startLoad () {
          this.loader = setInterval(() => {
            this.loading++
            if (this.loading === 100) {
              console.log('clear', this.loading)
              clearInterval(this.loader)
            }
          }, 100)
        }
      }
      components: {
        VueSlideBar
      }
    }
    </script> 

    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.

    # 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

    Developed with ❤️ and ☕️

    Keywords

    none

    Install

    npm i vue-slide-bar

    DownloadsWeekly Downloads

    3,585

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    43.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • biig_pongsatorn