vue-rangeslider
Your
Slider component for Vue.js
npm
Demo
Install
npm i @domak/vue-ragneslider@latest
Usage
// default
<template>
<RangeSlider></RangeSlider>
</template>
// with props
<template>
<RangeSlider
:handle="{
color: 'aquamarine',
width: '20px',
height: '20px',
}"
:min="10"
:max="90"
</RangeSlider>
</template>
<script>
import RangeSlider from "@domak/vue-rangeslider";
export default {
components: {
RangeSlider
}
}
</script>
Props
Name | Type | Default Value | Description |
---|---|---|---|
min | Number | 0 | Minimum value of slider |
max | Number | 100 | Maximum value of slider |
sliceNum | Number | 5 | Number of slices |
width | string | 100% | Width of rangeslider |
height | string | none | Height of rangeslider |
defaultMin | Number | 50 | Default value of min handle |
defaultMax | Number | 70 | Default value of max handle |
gap | Number | 5 | How much gap when moving handle with keyboard |
isKeyAllowed | boolean | false | Move handle with keyboard Descriptions |
bar | Object | - | Bar Option |
handle | Object | - | Handle Option |
tooltip | Object | - | Tooltip Option |
range | Object | - | Range Option |
Keyboard Movement
Type | Key Code | Description |
---|---|---|
left | 37 |
Move selected handle to left |
right | 39 |
Move selected handle to right |
up, backspace |
38 , 8
|
Move to next handle |
down, enter |
40 , 13
|
Move to prev handle |
Bar option
Handle Option
Tooltip Option
Range option
Name | Type | Default Value | Description |
---|---|---|---|
textColor | string | black | Text color of range |
color | string | none | Background color of range |
Methods
Name | Description |
---|---|
getMinValue | Get value of min handle |
getMaxValue | Get value of max handle |
Feel free make a issue for this project
Contact forbid403@naver.com