Slider 滑块选择器

通过拖动滑块选择单个数值或数值区间。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

vue

<!-- 选择 0 到 100 之间的数值 -->
<fui-slider :value="30" showValue @change="handleSliderChange" />

handleSliderChange 接收包含 value 的对象；启用 section 时还会提供 endValue。

尺寸属性的单位为 px。

属性	类型	说明	官网默认值
width	Number / String	轨道宽度	240
height	Number / String	轨道高度	2
radius	Number / String	轨道圆角	2
min	Number / String	最小值	0
max	Number / String	最大值	100
step	Number / String	步长，必须大于 0 且能整除最大值与最小值之差	1
value	Number / String	当前值或区间起始值	0
section	Boolean	是否选择区间	false
endValue	Number / String	区间结束值，仅 section 有效	100
background	String	未选中轨道颜色	#e1e1e1
activeColor	String	已选中轨道颜色	#465CFF
blockWidth	Number / String	滑块宽度	24
blockHeight	Number / String	滑块高度	24
blockColor	String	滑块背景色	#fff
blockRadius	Number / String	滑块圆角	12
disabled	Boolean	是否禁止操作	false
showValue	Boolean	是否显示当前值	false
valueWidth	Number / String	数值区域宽度	32
valueSize	Number / String	数值字体大小	14
valueColor	String	数值文字颜色	#333

事件	说明	回调参数
changing	滑动过程中触发	`{ value, endValue }`，区间模式才包含 endValue
change	滑动结束时触发	`{ value, endValue }`，区间模式才包含 endValue

非 nvue 平台的默认选中颜色由 --fui-color-primary 控制。

插槽	说明
—	官网未列出该组件的插槽