Mind UI Vue

# Slider 滑块

# 介绍

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

# 引入

import { Slider } from 'mind-ui-vue';
Vue.use(Slider);

# 示例

# 基础用法

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

export default {
  data() {
    return {
      value: 50,
    };
  },
  methods: {
    onChange(value) {
      console.log(`当前值：${value}`);
    },
  }
};

# 指定步长

<m-slider v-model="0" step="10" @change="onChange" />

# 指定区间

<m-slider v-model="0" min="100" max="200" @change="onChange" />

# 定义线宽与颜色

<m-slider v-model="0" active-color="#ee0a24" bar-height="10" @change="onChange" />

# 禁用

<m-slider v-model="50" disabled @change="onChange" />

# 自定义按钮

<m-slider v-model="value" use-slot @input="onChange">
  <div class="custom-button">{{ value }}</div>
</m-slider>

# Api

# Props

参数 说明 类型 可选值 默认值
v-model 滑块的值 Number — —
step 步长 Number — 1
min 最小值 Number — 0
max 最大值 Number — 100
disabled 是否禁用 Boolean — false
bar-height 滑槽的线宽，单位 px Number — 6
active-color 进度条激活态颜色 String — #1989fa
inactive-color 进度条底色 String — #e5e5e5

# Events

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

← Switch 开关 →