LimeSlider 滑动输入条

• 滑动型输入器，展示当前值和可选范围、区间、档位。兼容uniapp/uniappx
• 插件依赖lime-shared、lime-style，不喜勿下

安装

导入即可，首次导入可能需要重新编译

文档

slider

代码演示

基础使用

<l-slider v-model="value" @change="onChange" />

const value = ref(50);
const onChange = (value: number) => {
	console.log('当前值：' + value)
};

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider v-model="value" :range="true" @change="onChange" />

// 双滑块模式时，值必须是数组
const value = ref([10, 50]);
const onChange = (value: number[]) => {
	console.log('当前值：' + value)
};

指定范围

通过设置 min 属性和max达到指定范围。

<l-slider v-model="value" :min="-50" :max="50"/>

禁用

通过设置 disabled属性禁用。

<l-slider v-model="value4" :disabled="true" />

指定步长

通过设置 step 属性值指定步长。

<l-slider v-model="value" :step="10" />

自定义样式

通过 thumb-size 属性设置按钮尺寸，通过rail-size设置进度条高度，通过track-color可设置进度条激活态颜色。

<l-slider v-model="value" thumb-size="30px" rail-size="4px" track-color="#34c471" />

自定义按钮

通过 startThumb 插槽自定义按钮。

<l-slider v-model="value" rail-size="4px" track-color="#ffb400">
	<template #startThumb>
		<text class="custom-thumb">{{ value }}</text>
	</template>
</l-slider>

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<l-slider v-model="value" :range="true" :vertical="true"/>

插件标签

• 默认 l-slider 为 component
• 默认 lime-slider 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
v-model	当前分值	number	-
value	当前分值	number	-
max	最大值	number	100
min	最小值	number	0
step	步长	number	0
step	步长	number	1
vertical	是否垂直展示	boolean	false
disabled	是否禁用滑块	boolean	false
range	双滑块模式	boolean	false
reverse	反向显示进度条	boolean	false
readonly	是否为只读状态，只读状态下无法修改滑块的值	boolean	false
noCross	禁止滑块交叉（双滑块模式有效）	boolean	false
thumbSize	滑块按钮大小	string	-
thumbColor	滑块按钮颜色	string	-
thumbBorderColor	滑块按钮描边颜色	string	-
thumbRadius	滑块按钮圆角	string	-
railColor	进度条轨道颜色	string	-
railRadius	进度条轨道圆角	string	-
railSize	进度条轨道尺寸	string	-
trackColor	进度条激活态颜色	string	-

Events

事件名	说明	回调参数
change	当前分值变化时触发的事件	currentValue: number|number[]
dragend	结束拖动时触发	currentValue: number|number[]
dragstart	开始拖动时触发

Slots

名称	说明
startThumb	左边插槽
endThumb	右边插槽

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

名称	默认值	描述
--l-slider-rail-size:	20px	-
--l-slider-rail-color:	$fill-2	-
--l-slider-rail-color:	99px	-
--l-slider-track-color:	$primary-color	-
--l-slider-thumb-size:	12px	-
--l-slider-thumb-color:	white	-
--l-slider-thumb-radius:	99px	-
--l-slider-thumb-border-color:	$gray-1	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码