小程序开发框架

# mx-slider 滑块

滑动输入条，用于在给定的范围内选择一个值。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-slider": "/miniprogram_npm/m-ui/mx-slider/index"
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

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

Page({
  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `当前值：${event.detail}`,
    });
  },
});

# 双滑块

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

<mx-slider value="{{ 10, 50 }}" range @change="onChange" />

Page({
  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `当前值：${event.detail}`,
    });
  },
});

# 指定选择范围

<mx-slider min="-50" max="50" />

# 禁用

<mx-slider value="50" disabled />

# 指定步长

<mx-slider  value="50" step="10" />

# 渐变色

 <mx-slider
    activeColor="linear-gradient(270deg, #FFDE95 0%, #F0F5EB 53%, #BCECFF 100%) fixed center"
    value="{{Value1}}"
    min="10"
    max="35"
    bind:change="onChange"></mx-slider>

# 自定义样式

<mx-slider  value="50" bar-height="4px" active-color="#ee0a24" />

# 自定义按钮

<mx-slider  value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
  <view class="custom-button" slot="button">{{ currentValue }}/100</view>
</mx-slider>

Page({
  data: {
    currentValue: 50,
  },

  onDrag(event) {
    this.setData({
      currentValue: event.detail.value,
    });
  },
});

# 垂直方向

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

<view style="height: 150px;">
  <mx-slider value="50" vertical bind:change="onChange" />
  <mx-slider
    value="{{ [10, 50] }}"
    range
    vertical
    style="margin-left: 100px;"
    bind:change="onChange"
  />
</view>

Page({
  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `当前值：${event.detail}`,
    });
  },
});

# API

# Attributes

参数 类型 是否必传 默认值 说明
value number | number[] N 0 当前进度百分比，在双滑块模式下为数组格式
disabled boolean N false 是否禁用滑块
max number N 100 最大值
min number N 0 最小值
step number N 1 步长
bar-height string | number N 2px 进度条高度，默认单位为 px
active-color string N #1989fa 进度条激活态颜色
inactive-color string N #e5e5e5 进度条默认颜色
use-slot-button boolean | number[] N false 是否使用按钮插槽
range boolean N false 是否开启双滑块模式
vertical boolean N false 是否垂直展示

# Events

事件名 说明 回调参数
bind:drag 拖动进度条时触发 event.detail.value: 当前进度
bind:change 进度值改变后触发 event.detail: 当前进度
bind:drag-start 开始拖动时触发 -
bind:drag-end 结束拖动时触发 -

# 外部样式类

类名 说明
custom-class 根节点样式类

# Slots

名称 说明 参数
button 自定义滑块按钮 { value: number }
left-button 自定义左侧滑块按钮（双滑块模式下） { value: number }
right-button 自定义右侧滑块按钮 （双滑块模式下） { value: number }

← 搜索（search） →