Slider 滑动输入条

滑动型输入器，展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

代码演示

基本

基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

<template>
    <div>
        <v-slider v-model="sliderValue" :disabled="disabled"></v-slider>
        <v-slider range v-model="sliderRange" :disabled="disabled"></v-slider>
        <div>
            Disabled: <v-switch v-model="disabled"></v-switch>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                sliderValue: 30,
                sliderRange: [20, 50],
            };
        },
    };
</script>

带 icon 的滑块

滑块左右可以设置图标来表达业务含义。

<template>
    <div class="icon-wrapper">
        <v-icon type="frown-o" :class="customIconValue <= 50 ? 'anticon-highlight' : ''"></v-icon>
        <v-slider v-model="customIconValue"></v-slider>
        <v-icon type="smile-o" :class="customIconValue > 50 ? 'anticon-highlight' : ''"></v-icon>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                customIconValue: 30,
            };
        },
    };
</script>
<style>
    .icon-wrapper {
        position: relative;
        padding: 0px 30px;
    }
    .icon-wrapper .anticon {
        position: absolute;
        top: -3px;
        width: 16px;
        height: 16px;
        line-height: 1;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.3);
    }
    .icon-wrapper .anticon:first-child {
        left: 0;
    }
    .icon-wrapper .anticon:last-child {
        right: 0;
    }
    .anticon.anticon-highlight {
        color: rgba(0, 0, 0, 0.6);
    }
</style>

事件

当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 afterChange 事件，并把当前值作为参数传入。

<template>
    <div>
        <v-slider v-model="sliderValue"  @before-change="beforeChange" @change="onChange" @after-change="afterChange"></v-slider>
        <v-slider range v-model="sliderRange"  @before-change="beforeChange" @change="onChange" @after-change="afterChange"></v-slider>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                sliderValue: 30,
                sliderRange: [20, 50],
            };
        },
        methods: {
            beforeChange(value) {
                console.log(`before slider change: ${value}`);
            },
            onChange(value) {
                console.log(`slider changed: ${value}`);
            },
            afterChange(value) {
                console.log(`after slider change: ${value}`);
            },
        },
    };
</script>

和输入框组件保持同步

和 数字输入框 组件保持同步。

<template>
    <v-row>
        <v-col :span="20">
            <v-slider :min="1" :max="20" v-model="synValue"></v-slider>
        </v-col>
        <v-col :span="4">
            <v-input-number :min="1" :max="20" v-model="synValue"></v-input-number>
        </v-col>
    </v-row>
    <v-row>
        <v-col :span="20">
            <v-slider :min="0" :max="1" :step="0.01" v-model="synFloatValue"></v-slider>
        </v-col>
        <v-col :span="4">
            <v-input-number :min="0" :max="1" :step="0.01" v-model="synFloatValue"></v-input-number>
        </v-col>
    </v-row>
</template>
<script>
    export default {
        data() {
            return {
                synValue: 2,
                synFloatValue: 0.2,
            };
        },
    };
</script>

自定义提示

使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。

<template>
    <div>
        <v-slider :value="30" :tip-formatter="tipFormatter"></v-slider>
        <v-slider :value="30" :tip-formatter="null"></v-slider>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        methods: {
            tipFormatter(value) {
                return `${value}%`;
            },
        },
    };
</script>

带标签的滑块

使用 marks 属性标注分段式滑块，使用 value 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。

<template>
    <div>
        <h4>included = true</h4>
        <v-slider :value="37" :marks="marks"></v-slider>
        <v-slider :value="[26, 37]" range :marks="marks"></v-slider>
        <h4>included = false</h4>
        <v-slider :value="37" :marks="marks" :included="false"></v-slider>
        <h4>marks & step</h4>
        <v-slider :value="37" :marks="marks" :step="10" dots></v-slider>
        <h4>step = null</h4>
        <v-slider :value="37" :marks="marks" :step="null"></v-slider>
    </div>
</template>

API

Slider Props

Slider Events