Slider 滑块

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

基础用法

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

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

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

通过设置属性 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 间隔不密集时使用。

带有输入框

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

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

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

展示标记

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

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

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

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

Slider events