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

|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 tooltipfalse 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

|Name|Description| |---|---| |getMinValue|Get value of min handle| |getMaxValue|Get value of max handle|

Feel free make a issue for this project

Contact [email protected]