basic/src/views/component_basic_example/slider.vue

<script>
import Alert from './components/alert.vue'

export default {
    components: {
        Alert
    },
    data() {
        return {
            value1: 0,
            value2: 50,
            value3: 36,
            value4: 48,
            value5: 42,
            value6: 0,
            value7: 0,
            value8: [4, 8],
            value9: 0
        }
    },
    methods: {
        formatTooltip(val) {
            return val / 100
        }
    }
}
</script>

<template>
    <div>
        <Alert />
        <page-header title="滑块" />
        <page-main title="基础用法" class="demo">
            <span class="demonstration">默认</span>
            <el-slider v-model="value1" />
            <span class="demonstration">自定义初始值</span>
            <el-slider v-model="value2" />
            <span class="demonstration">隐藏 Tooltip</span>
            <el-slider v-model="value3" :show-tooltip="false" />
            <span class="demonstration">格式化 Tooltip</span>
            <el-slider v-model="value4" :format-tooltip="formatTooltip" />
            <span class="demonstration">禁用</span>
            <el-slider v-model="value5" disabled />
        </page-main>
        <page-main title="离散值" class="demo">
            <span class="demonstration">不显示间断点</span>
            <el-slider v-model="value6" :step="10" />
            <span class="demonstration">显示间断点</span>
            <el-slider v-model="value6" :step="10" show-stops />
        </page-main>
        <page-main title="带有输入框" class="demo">
            <el-slider v-model="value7" show-input />
        </page-main>
        <page-main title="范围选择" class="demo">
            <el-slider v-model="value8" range show-stops :max="10" />
        </page-main>
        <page-main title="竖向模式" class="demo">
            <el-slider v-model="value9" vertical height="200px" />
        </page-main>
    </div>
</template>