Mind UI

# Slider 滑块

# 介绍

通过拖动滑块在一个固定区间内进行选择。

# 引入

"usingComponents": {
  "m-slider": "/dist/slider/index"
}

# 示例

# 基础用法

<m-slider value="{{ value }}" bind:change="onChange" />

Page({
  data: {
    value: 0
  },

  // 回调中更新 value 值
  onChange({ detail }) {
    this.setData({ 
    	value: detail 
    })
  }
})

# 预设值

<m-slider value="50" bind:change="onChange" />

# 指定步长

<m-slider value="0" step="10" bind:change="onChange" />

# 指定区间

<m-slider value="0" min="100" max="200" bind:change="onChange" />

# 定义线宽与颜色

<m-slider value="0" active-color="#ee0a24" bar-height="10" bind:change="onChange" />

# 禁用

<m-slider disabled bind:change="onChange" />

# 自定义按钮

<m-slider value="{{ value }}" use-slot bind:input="onChange6">
	<view class="custom-button">{{ value }}</view>
</m-slider>

# Api

# Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String — —
value 滑块的值 Number — —
min 最小值 Number — 0
max 最大值 Number — 100
disabled 是否禁用 Boolean — false
bar-height 滑槽的线宽（rpx） Number — 6
active-color 进度条激活态颜色 String — #1989fa
inactive-color 进度条底色 String — #e5e5e5

# Events

事件名称 说明 返回值
bind:change 进度值发生变化时的回调函数 event.detail: 新状态的值
bind:input 进度值发生变化时的回调函数 event.detail: 新状态的值

← Switch 开关 →