vue-slider-component滑块拖动插件的使用-CSDN博客

本文介绍了一款Vue滑块组件的使用，具备拖动点设置、进度条样式调整、数值范围控制等功能。通过详细的文档和API示例，展示了如何在项目中快速集成和自定义该组件，包括在main.js中引入、设置属性以及修改标签样式等步骤。此组件适用于需要滑动选择值的场景，提供了丰富的定制选项。

效果图

你可以左右拖动它的范围
在这里插入图片描述
进度条，标签的样式都可以通过props更改文档里面写的很清楚。你可以设置一个点拖动，当然也可以很多个点拖动，上图我用了两个点。数值的范围，数值的最大最小值你也可以控制。总体使用感受很好，功能很齐全，文档也有具体api的使用和样例。

使用文档
 gitub地址

跟着里面的QuickStart安装，参数配置都写的很清楚，比如我写了一个demo

首先你去npm install vue-slider-component --save
然后你去main.js里面引入他

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

Vue.component('VueSlider', VueSlider)

接着你就可以起一个页面如下

<template>
	<div id="app">
		<!-- default props -->
		<vue-slider v-model="value" tooltip="always" :min=min :max=max :tooltip-style="tooltipStyle"
					:tooltip-formatter="'{value}小时'" :enable-cross=false></vue-slider>
	</div>
</template>
<script>

export default {
	name: 'slider',
	data() {
		return {
			value: [0, 10],
			min: 0,
			max: 24,
			//修改标签样式
			tooltipStyle: {
				color: '#FFFFFF',
				width: '58px',
				height: '22px',
				background: 'linear-gradient(259.87deg, #7595FA 0.83%, #5D74FC 100%)',
				borderRadius: '16px',
				padding: '3px 10px'
			}
		}
	},
}
</script>

<style>
body {
	margin: 60px 30px;
}
</style>