vue-rangeslider

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

Keyboard Movement

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

Range option

Name|Type|Default Value|Description| |---|---|---|---| |textColor|string|black|Text color of range| |color|string|none|Background color of range|

Methods

Feel free make a issue for this project

Contact `forbid403@naver.com`