@domak/vue-rangeslider NPM

vue-rangeslider

version build MIT downloads stars Your ⭐star⭐ is very helpful!!! 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

Name	Type	Default Value	Description
width	string	100%	Width of bar
height	string	10px	Height of bar
color	string	black	Color of bar
sliceColor	string	#049DBF	Color of slice inside the bar
sliceType	string	bar	`dot` Change slice to dot

Handle Option

Name	Type	Default Value	Description
width	string	12px	Width of handle
height	string	12px	Height of handle
color	string	#D93D4A	Color of handle
border	string	none	Border of handle
borderRadius	string	50%	Border radius of handle

Tooltip Option

Name	Type	Default Value	Description
width	string	20px	Width of tooltip
height	string	20px	Height of tooltip
color	string	#F2C84B	Color of tooltip
visibility	boolean	false	`true` Always shows tooltip`false` Only shows while dragging
border	string	none	Border of tooltip
borderRadius	string	30%	Border radius of tooltip
textColor	string	white	Text color of tooltip
top	string	tooltip.height	Distance between handle and tooltip