Vue.js应用程序的一个小巧，可自定义且可访问的范围滑块。

安装和下载：

# Yarn
$ yarn add @domak/vue-ragneslider@latest

# NPM
$ npm i @domak/vue-ragneslider@latest --save

基本用法：

1.导入并注册组件。

import RangeSlider from "@domak/vue-rangeslider";
export default {
  components: {
    RangeSlider
  }
}

2.将范围滑块添加到模板。

<template>
  <RangeSlider></RangeSlider>
</template>

3.使用以下道具自定义范围滑块。

min: {
  type: Number,
  default: 0,
},
max: {
  type: Number,
  default: 100,
},
bar: {
  type: Object,
},
handle: {
  type: Object,
},
tooltip: {
  type: Object,
},
range: {
  type: Object,
},
sliceNum: {
  type: Number,
  default: 3,
},
width: {
  type: String,
  default: '50%',
},
height: {
  type: String,
  default: '',
},
defaultMin: {
  type: Number,
  default: 50,
},
defaultMax: {
  type: Number,
  default: 70,
},
isKeyAllowed: {
  type: Boolean,
  default: false,
},
gap: {
  type: Number,
  default: 5,
}

4.默认栏选项。

{
  width: '100%',
  height: '10px',
  color: 'black',
  sliceColor: '#049DBF',
},

5.禁用句柄选项。

{
  width: '12px',
  height: '12px',
  color: '#D93D4A',
  borderRadius: '50%',
},

6.默认工具提示选项。

{
  width: '20px',
  height: '20px',
  color: '#F2C84B',
  visibility: false,
  borderRadius: '30%',
  textColor: 'white',
},