Vue自定义范围滑块组件用于音量或音频/视频进度控制。
这是一个用Vue Js创建的默认范围滑块替代品。为了帮助你，我在Vue 3中制作了一个自定义范围滑块组件，它拥有强大的组合API。你可以自定义外观、宽度、高度、颜色，甚至根据你的需要显示/隐藏任何部分，总之你可以自定义任何东西，甚至不需要编辑组件本身。
请看这里的例子。Vue自定义范围滑块示例
如何使用它？
这很容易😁只需下载或复制该组件的 src文件夹中下载或复制，并将其放入你的项目中。然后简单地导入该组件，像其他vue js组件一样使用它。
获取进度值并根据需要进行设置
你可以在组件上使用v-model指令来获取滑块的位置值，并根据你的需要使用它来设置音量或视频/音频进度。如果你访问上面的例子，你会得到更清晰的概念。
可用的道具。
id - 它是必需的。 - 之前/默认的进度，已经是唯一的。 defaultPosition default: 0 **注意：**它的类型是数字。所以，传递浮点数/整数，但不传递字符串。而且它必须在0到1之间 - 设置范围滑块容器的高度。rangeContainerHeight default: 7px**注意：**设置的高度要大于范围滑块的高度。因为它是滑块的背景，将用于悬停效果/动画 - 设置范围滑块本身的高度。. - 设置拇指指示器的高度。.rangeHeight default: 3px``thumbHeight default: 200%**注意：**记得使用百分比值来保持比例 - 范围滑块的背景颜色。 - 拇指指示器颜色。 - 预览条颜色。 . - 进度条颜色(主指示器)。. - 悬停效果动画，就像在youtube视频播放器中一样。. - 始终显示拇指指示器。. - 隐藏预览指示器。. - 隐藏进度/主要指标栏。 。 - 始终隐藏拇指指标。.rangeBgColor default: `rgba(100, 100, 100, .5)` thumbColor default: `red` previewColor default: rgb(150, 150, 150)``progressColor default: red``expandOnHover default: false``AlwaysShowThumb default: false``noPreviewBar default: false``noProgressBar default: false``noThumb default: false
