<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <div class="">
                            <span class="demonstration">默认</span>
                            <e-slider v-model="value1"></e-slider>
                        </div>
                        <div class="">
                            <span class="demonstration">自定义初始值</span>
                            <e-slider v-model="value2"></e-slider>
                        </div>
                        <div class="">
                            <span class="demonstration">隐藏 Tooltip</span>
                            <e-slider v-model="value3" :show-tooltip="false"></e-slider>
                        </div>
                        <div class="">
                            <span class="demonstration">格式化 Tooltip</span>
                            <e-slider v-model="value4" :format-tooltip="formatTooltip"></e-slider>
                        </div>
                        <div class="">
                            <span class="demonstration">禁用</span>
                            <e-slider v-model="value5" disabled></e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 离散值 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>离散值</span>
                    </div>
                    <div>
                        <div class="">
                            <span class="demonstration">不显示间断点</span>
                            <e-slider
                            v-model="value6"
                            :step="10">
                            </e-slider>
                        </div>
                        <div class="">
                            <span class="demonstration">显示间断点</span>
                            <e-slider
                            v-model="value7"
                            :step="10"
                            show-stops>
                            </e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 带有输入框 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>带有输入框</span>
                    </div>
                    <div>
                        <div class="">
                            <e-slider
                            v-model="value8"
                            show-input>
                            </e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 范围选择 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>范围选择</span>
                    </div>
                    <div>
                        <div class="">
                            <e-slider
                            v-model="value9"
                            range
                            show-stops
                            :max="10">
                            </e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
             <!-- 竖向模式 -->
             <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>竖向模式</span>
                    </div>
                    <div>
                        <div class="">
                            <e-slider
                            v-model="value10"
                            vertical
                            height="200px">
                            </e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 展示标记 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>展示标记</span>
                    </div>
                    <div>
                        <div class="">
                            <e-slider
                            v-model="value11"
                            range
                            :marks="marks">
                            </e-slider>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            value1: 0,
            value2: 50,
            value3: 36,
            value4: 48,
            value5: 42,
            value6: 0,
            value7: 0,
            value8: 0,
            value9: [4, 8],
            value10: 0,
            value11: [30, 60],
            marks: {
                0: '0°C',
                8: '8°C',
                37: '37°C',
                50: {
                    style: {
                    color: '#1989FA'
                    },
                    label: this.$createElement('strong', '50%')
                }
            }
        }
    },
    mounted() {
    },
    methods: {
        formatTooltip(val) {
            return val / 100;
        }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
