This event is similar to 'update' event, in addition it will trigger even the value was changed through programmatically also. Simply it is the combination of "change" and "drag". This event triggered when the slider value updated such as during change as well as the handle drag. This event triggered when the slider's value gets changed. This event will be triggered before the value change happens. This event triggered after the control creation or initialization. Since this acts like a wrapper of roundSlider, so the events will be treated as props. Note: The event hanlders should be passed like v-bind:change="handler" or :change="handler" as same as the props, instead of v-on. Otherwise, by default the slider starts with min value. This property decides at which point the slider should start. When this property set as true, we can change the value by editing the tooltip.Įnables or disables the keyboard functionality.Įnables or disables the mouse scroll functionality. The handleShape property mentions the shape of the handle.Įnables or disables the tooltip inside the slider.Įnables the editable option of tooltip. The handleSize property mentions the size of the handle. This enables the control into the readOnly mode, so we can't interact with the control when readOnly enabled. By setting "range" it will becomes a range slider.Įnables or disables the slider animation while value change. By default it will inherits the `rangeColor` value. Indicates the border width of the slider. So, endAngle 90 means it's a quarter circle, like wise 180 - half circle and 270 pie circle Indicates the end angle of the slider arc. Indicates the starting angle of the slider. The lineCap property mentions the shape at the edge of the path and range bars. Indicates the width (or thickness) of the slider. The radius property indicates the radius of the slider's circle. Instead, by using `v-modal` you can enable the two-way data binding. The max property indicates the maximum value of the slider.ĭecides the number of steps or value should take while we move the handle. The min property indicates the minimum value of the slider. Note: All the props supports String data type as well as their own type. based on CDN you can try the below JSFiddleįor 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.based on vue-cli 3 you can try the below CodeSandbox.The easiest way to try and start using vue-round-slider is using JSFiddle or CodeSandbox. Import Vue from 'vue' import RoundSlider from 'vue-round-slider' new Vue ( ) Quick Start
0 kommentar(er)
