Customizable Circular Range Slider Component - Round Slider

Install & Download:

# Yarn
$ yarn add vue-round-slider
# NPM
$ npm i vue-round-slider

Description:

Round Slider is a Vue.js component to create highly customizable, circular range slider or knob controls on the app.

More Features:

Also supports pie circle, semi-circle/half circle, and quarter circle shapes.
Custom number formatting.
Touch friendly.
Mouse wheel and keyboard are supported as well.
CSS3 animations.

Basic usage:

1. Import the Round Slider component.

import Vue from 'vue'
import RoundSlider from 'vue-round-slider'

2. Register the component.

new Vue({
    el: '#app',
    components: {
      RoundSlider,
      // ...
    }
})

3. Add the round slider component with default props to the app template.

<round-slider />

new Vue({
    el: '#app',
    components: {
      RoundSlider,
    },
    data() {
      return {
        sliderValue: 50
      }
    },
})

4. Available props to customize the round slider.

min: {
  type: [String, Number],
  default: 0
},
max: {
  type: [String, Number],
  default: 100
},
step: {
  type: [String, Number],
  default: 1
},
value: {
  type: [String, Number],
  default: null
},
radius: {
  type: [String, Number],
  default: 105
},
width: {
  type: [String, Number],
  default: 20
},
lineCap: {
  type: String,
  default: "butt",
  validator(cap) {
    return validateProp('lineCap', cap);
  },
},
startAngle: {
  type: [String, Number],
  default: 0
},
endAngle: {
  type: [String, Number],
  default: "+360"
},
// UI appearance related props
borderWidth: {
  type: [String, Number],
  default: 0
},
borderColor: {
  type: String,
  default: "inherit"
},
pathColor: {
  type: String,
  default: "#EEE"
},
rangeColor: {
  type: String,
  default: "#69F"
},
tooltipColor: {
  type: String,
  default: "inherit"
},
// Behaviour related props
sliderType: {
  type: String,
  default: "min-range", // or 'range'
  validator(type) {
    return validateProp('sliderType', type);
  },
},
circleShape: {
  type: String,
  default: "full",
  validator(shape) {
    return validateProp('circleShape', shape);
  },
},
animation: {
  type: [String, Boolean],
  default: true
},
readOnly: {
  type: [String, Boolean],
  default: false
},
disabled: {
  type: [String, Boolean],
  default: false
},
// Miscellaneous
handleSize: {
  type: [String, Number],
  default: "+0"
},
handleShape: {
  type: String,
  default: "round",
  validator(shape) {
    return validateProp('handleShape', shape);
  },
},
showTooltip: {
  type: [String, Boolean],
  default: true
},
editableTooltip: {
  type: [String, Boolean],
  default: true
},
keyboardAction: {
  type: [String, Boolean],
  default: true
},
mouseScrollAction: {
  type: [String, Boolean],
  default: false
},
// Usecase related props
startValue: {
  type: [String, Number],
  default: null
},
// Events
create: {
  type: Function,
  default: null,
},
beforeValueChange: {
  type: Function,
  default: null,
},
change: {
  type: Function,
  default: null,
},
update: {
  type: Function,
  default: null,
},
valueChange: {
  type: Function,
  default: null,
},
tooltipFormat: {
  type: Function,
  default: null,
}