Slider 滑块

概述

滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。

代码示例

基础用法

滑块的基本用法，可以使用 v-model 双向绑定数据。

通过设置属性 range 开启双滑块，通过设置属性 disabled 禁用滑块。

注意，单滑块时，value 格式为数字，当开启双滑块时，value 为长度是2的数组，且每项为数字。

<template>
    <Slider v-model="value1"></Slider>
    <Slider v-model="value2" range></Slider>
    <Slider v-model="value3" range disabled></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value1: 25,
                value2: [20, 50],
                value3: [20, 50]
            }
        }
    }
</script>

离散值

通过设置属性 step 可以控制每次滑动的间隔。

<template>
    <Slider v-model="value4" :step="10"></Slider>
    <Slider v-model="value5" :step="10" range></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value4: 30,
                value5: [20, 50]
            }
        }
    }
</script>

显示间断点

通过设置属性 show-stops 可以显示间断点，建议在 step 间隔不密集时使用。

<template>
    <Slider v-model="value6" :step="10" show-stops></Slider>
    <Slider v-model="value7" :step="10" show-stops range></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value6: 30,
                value7: [20, 50]
            }
        }
    }
</script>

带有输入框

通过设置属性 show-input 可以显示数字输入框，配合使用，仅在单滑块模式下有效。

<template>
    <Slider v-model="value8" show-input></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value8: 25
            }
        }
    }
</script>

自定义提示

Slider 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip。

<template>
    <Slider v-model="value9" :tip-format="format"></Slider>
    <Slider v-model="value10" :tip-format="hideFormat"></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value9: 25,
                value10: 25
            }
        },
        methods: {
            format (val) {
                return 'Progress: ' + val + '%';
            },
            hideFormat () {
                return null;
            }
        }
    }
</script>

展示标记

^4.0.0 设置属性 marks 可以显示标记。

标记的 key 取值应该在闭合区间 [min, max] 内。

标记点也可以通过 style 和 label 自定义样式。

<template>
    <Slider v-model="value11" range :marks="marks"></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value11: [25, 65],
                marks: {
                    0: '0°C',
                    12: '12°C',
                    32: '32°C',
                    55: {
                        style: {
                            color: '#ff0000'
                        },
                        label: this.$createElement('strong', '55°C')
                    }
                }
            }
        }
    }
</script>

API

Slider props

Slider events