---
name: Slider
title: 滑动选择器
category: 表单组件
owner: 徐修楼
---

## 示例

```atom 基础示例
<template>
    <view class="c-container wrapper">
        <view class="c-gap-top c-gap-bottom">当前值、事件</view>
        <slider
            :value="value"
            @changing="onChanging"
            @change="onChange"
            class="c-gap-top c-gap-bottom"
        />
        <slider :value="valueChanging" disabled class="c-gap-top c-gap-bottom"/>
        <slider :value="valueChange"disabled class="c-gap-top c-gap-bottom"/>

        <view class="c-gap-top c-gap-bottom">最大值、最小值和步长</view>
        <slider
            min="100"
            max="200"
            step="10"
            value="150"
            class="c-gap-top c-gap-bottom"
        />

        <view class="c-gap-top c-gap-bottom">禁用</view>
        <slider value="28" disabled class="c-gap-top c-gap-bottom"/>

        <view class="c-gap-top c-gap-bottom">滑动轨道</view>
        <slider
            value="40"
            background-color="#f13f40"
            active-color="#65b12c"
            class="c-gap-top c-gap-bottom"
        />

        <view class="c-gap-top c-gap-bottom">滑块</view>
        <slider
            value="40"
            block-size="28"
            block-color="#65b12c"
            class="c-gap-top c-gap-bottom"
        />

        <view class="c-gap-top c-gap-bottom">显示当前值</view>
        <slider
            min="10"
            max="1000"
            step="10"
            value="900"
            show-value
            class="c-gap-top c-gap-bottom"
        />
    </view>
</template>

<script type="config">
{
    components: {
        slider: 'components/Slider/Slider',
        view: 'components/View/View'
    },
    data: {
        value: 62,
        valueChanging: 62,
        valueChange: 62
    }
}
</script>

<script>
export default {
    methods: {
        onChanging(event) {
            this.valueChanging = event.detail.value;
        },
        onChange(event) {
            this.valueChange = event.detail.value;
        }
    }
};
</script>

<style scoped>
.wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
</style>

```

## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
name | string |  | 可选 | 表单元素名称 | -
min | number \| string | 0 | 可选 | 最小值 | -
max | number \| string | 100 | 可选 | 最大值 | -
step | number \| string | 1 | 可选 | 步长，取值必须大于&nbsp;0，并且可被&nbsp;(max&nbsp;-&nbsp;min)&nbsp;整除 | -
disabled | boolean | false | 可选 | 是否禁用 | -
value | number \| string | 0 | 可选 | 当前取值 | -
backgroundColor | string | #ccc | 可选 | 背景条的颜色 | -
blockSize | number \| string | 24 | 可选 | 滑块的大小，取值范围为&nbsp;12&nbsp;-&nbsp;28 | -
blockColor | string | #fff | 可选 | 滑块的颜色 | -
activeColor | string | #3c76ff | 可选 | 已选择的颜色 | -
showValue | boolean | false | 可选 | 是否显示当前&nbsp;value | -



### Events


- **change**: 完成一次拖动后触发的事件

名称 | 类型 | 描述
--- | --- | ---
event | object | -
  event.detail | object | -
  event.detail.value | number | 改变后的值

- **changing**: 拖动过程中触发的事件

名称 | 类型 | 描述
--- | --- | ---
event | object | -
  event.detail | object | -
  event.detail.value | number | 改变后的值