vue-round-slider

A round slider component for Vue JS, with range slider support. Also it can be any kind of arc slider such as pie shape, half / semi-circle, quarter circle shape sliders.

Features

• Great look and feel with lots of customization
• Supports two-way data binding
• Range slider support
• Different circle shapes (pie, half, quarter) support
• Touch support
• Keyboard support
• Mouse scroll support
• Supports all CSS3 animations

Getting started

Installation

You can install the vue-round-slider package from NPM through the below command.

npm install vue-round-slider --save

Usage

Without any configuration you can simply render the slider, with the default props.

<round-slider />

Or, you can render with your own customizaition:

<round-slider
  v-model="sliderValue"
  start-angle="315"
  end-angle="+270"
  line-cap="round"
  radius="120"
/>

And then import and initialize the component:

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

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

Quick Start

The easiest way to try and start using vue-round-slider is using JSFiddle or CodeSandbox. For round-slider projects,

• based on vue-cli 3 you can try the below CodeSandbox
  • CodeSandbox Demo
• based on CDN you can try the below JSFiddle
  • JSFiddle Demo

APIs

Props

For better understanding the props was arranged based on some categories such as Basic props (frequently used), UI appearance related, Behaviour related, Miscellaneous and some Usecase related props.

Note: All the props supports String data type as well as their own type.

name	type	default	description
min	Number	0	The min property indicates the minimum value of the slider.
max	Number	100	The max property indicates the maximum value of the slider.
step	Number	1	Decides the number of steps or value should take while we move the handle.
value	String, Number	null	Sets or gets the value of the slider. Instead, by using \v-modal you can enable the two-way data binding.
radius	Number	105	The radius property indicates the radius of the slider's circle.
width	Number	20	Indicates the width (or thickness) of the slider.
lineCap	String	"butt"	The lineCap property mentions the shape at the edge of the path and range bars.
startAngle	Number	0	Indicates the starting angle of the slider.
endAngle	String, Number	"+360"	Indicates the end angle of the slider arc. So, endAngle 90 means it's a quarter circle, like wise 180 - half circle and 270 pie circle
borderWidth	Number	0	Indicates the border width of the slider.
borderColor	String	"inherit"	Sets the border color of the slider. By default it will inherits the \rangeColor value.
pathColor	String	"#EEE"	Sets the path color of the slider.
rangeColor	String	"#69F"	Sets the range color of the slider.
tooltipColor	String	"inherit"	Sets the tooltip color of the slider. By default it will inherits the \rangeColor value.
sliderType	String	"min-range"	Indicates the slider type to be render. By setting "range" it will becomes a range slider.
circleShape	String	"full"	Indicates the circle shape to be render.
animation	Boolean	true	Enables or disables the slider animation while value change.
readOnly	Boolean	false	This enables the control into the readOnly mode, so we can't interact with the control when readOnly enabled.
disabled	Boolean	false	Enables or disables the control.
handleSize	String, Number	"+0"	The handleSize property mentions the size of the handle.
handleShape	String	"round"	The handleShape property mentions the shape of the handle.
showTooltip	Boolean	true	Enables or disables the tooltip inside the slider.
editableTooltip	Boolean	true	Enables the editable option of tooltip. When this property set as true, we can change the value by editing the tooltip.
keyboardAction	Boolean	true	Enables or disables the keyboard functionality.
mouseScrollAction	Boolean	false	Enables or disables the mouse scroll functionality.
startValue	Number	null	This property decides at which point the slider should start. Otherwise, by default the slider starts with min value.

Events

Note: The event hanlders should be passed like v-bind:change="handler" or :change="handler" as same as the props, instead of v-on:. Since this acts like a wrapper of roundSlider, so the events will be treated as props.

name	description
create	This event triggered after the control creation or initialization.
beforeValueChange	This event will be triggered before the value change happens. And this event can be cancellable.
change	This event triggered when the slider's value gets changed.
update	This event triggered when the slider value updated such as during change as well as the handle drag. Simply it is the combination of "change" and "drag".
valueChange	This event is similar to 'update' event, in addition it will trigger even the value was changed through programmatically also.
tooltipFormat	This event will act as a callback. So you can customize the tooltip template by returning with the custom values here.

Screenshots

Different appearances

Different circle shapes

GitHub