Vue simple Slide Bar

A Simple Vue Slider Bar Component.

Install

npm i --save vue-simple-slide-bar

Usage

// main.js
import Vue from 'vue'
import VueSimpleSlideBarPlugin from 'vue-simple-slide-bar'

Vue.component('VueSimpleSlideBar', VueSimpleSlideBarPlugin)

or

// xxx.vue
import VueSimpleSlideBar from 'vue-simple-slide-bar'

export default {
  components: {
    VueSimpleSlideBar
  }
}

Simple

<template>
  <vue-simple-slide-bar v-model="value"/>
</template>

<script>
export default {
  data () {
    return {
      value: 50
    }
  }
}
</script>

With Label

<template>
  <div>
    <vue-simple-slide-bar
      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>
    </vue-simple-slide-bar>
    <h2>Value: {{slider.value}}</h2>
    <h2>Label: {{rangeValue.label}}</h2>
  </div>
</template>

<script>
import VueSimpleSlideBar from 'vue-simple-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: {
    VueSimpleSlideBar
  }
}
</script>

Custom Style & Min-Max

<template>
  <div>
    <vue-simple-slide-bar
      v-model="value2"
      :min="1"
      :max="10"
      :processStyle="slider.processStyle"
      :lineHeight="slider.lineHeight"
      :tooltipStyles="{ backgroundColor: 'red', borderColor: 'red' }">
    </vue-simple-slide-bar>
    <h2>Value: {{value2}}</h2>
  </div>
</template>

<script>
import VueSimpleSlideBar from 'vue-simple-slide-bar'

export default {
  data () {
    return {
      value2: 8,
      slider: {
        lineHeight: 10,
        processStyle: {
          backgroundColor: 'red'
        }
      }
    }
  },
  components: {
    VueSimpleSlideBar
  }
}
</script>

Loading

<template>
  <div>
    <vue-simple-slide-bar
      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 VueSimpleSlideBar from 'vue-simple-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: {
    VueSimpleSlideBar
  }
}
</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.

License

MIT