Slider 滑块 1.0.1

手机扫码预览

01:50



---

组件名：rice-slider

注意

1.0.1版本开始支持，鸿蒙请更新至 1.0.7 版本使用

APP端使用 DrawableContext 实现，仅使用了一个 view

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 绑定值

<rice-slider v-model="value"></rice-slider>

双滑块

通过 range 属性开启双滑块，且 v-model 绑定的值需要为数组格式

<rice-slider v-model="values" range></rice-slider>

<script setup>
  const values = ref([30, 70])
</script>

胶囊形状

mode 设置为 capsule 即可开启胶囊形状

<rice-slider v-model="value5" mode="capsule"></rice-slider>

<rice-slider v-model="values5" range mode="capsule"></rice-slider>

带数值

• 通过 show-value 属性可以显示当前的数值
• 通过 value-position 可以设置显示值的位置，可选为 right
• 通过 format-valuetip 函数可以格式化显示的文本

<rice-slider v-model="value2" show-value></rice-slider>
<rice-slider v-model="value2" show-value value-position="right" :format-valuetip="formatValuetip"></rice-slider>

<script setup>
	const formatValuetip = (value : number) => {
		return `${value}分`
	}
</script>

步长设置

通过 step 开启步长，值为数字类型

<rice-slider v-model="value6" :step="10"  show-value value-position="top"
></rice-slider>

最大最小值

通过 min 和 max 设置最大最小值

<rice-slider v-model="value7" :min="50" :max="200" show-value @change="onChange"></rice-slider>

自定义样式

<rice-slider v-model="value3" active-color="#07c160" inactive-color="#f56c6c" button-color="#845ec2"
button-border-color="#845ec2"></rice-slider>

<rice-slider v-model="value3" mode="capsule" active-color="#07c160" inactive-color="#f56c6c"
button-color="#845ec2" button-border-color="#845ec2"></rice-slider>

API

Props

属性名	类型	说明	默认值
v-model/ model-value	String|Number	绑定的值	-
min	Number	滑块的最小值 默认0	-
max	Number	滑块的最大值 默认100	-
step	Number	步长 默认 1,确保(max - min)能被step整除，这样最大值才能被选中	-
range	Boolean	是否开启双滑块模式，当v-model 绑定的值为数组时才有效	-
show-value	Boolean	是否显示当前的值，默认flase	-
value-color	String	文字颜色	-
value-position	String	value显示的位置，默认 top 可选 right	-
format-valuetip	Function	格式化value信息	-
disabled	Boolean	是否禁用,默认false	-
mode	String	滑块风格,可选值：capsule	default
readonly	Boolean	是否只读,默认false	-
track-height	Number|String	进度条的高度，mode 为 default 时有效默认， 4px ,mode 为 capsule 时 默认18px	-
button-size	Number|String	滑块按钮的尺寸，默认25px,mode 为 default 时有效,胶囊态下的按钮尺寸和track-height 一致，buttonSize参数无效	-
button-color	String	滑块按钮的背景色	-
button-border-color	String	滑块按钮的边框色	-
active-color	String	进度条激活态的颜色	-
inactive-color	String	进度条非激活态的颜色	-
custom-style	Object	自定义style	-

Events

事件名	说明	回调参数
change	拖动结束后触发	value:number[]\number，双滑块时为数组格式
changing	拖动过程中触发	value:number[]\number，双滑块时为数组格式

类型定义

组件导出如下类型

// 组件类型
const sliderRef=ref<RiceSliderComponentPublicInstance|null>(null)