在拖动滑块时，显示当前值

通过设置绑定值自定义滑块的初始值

显示代码

离散值

选项可以是离散的

<template>
  <div class="block">
    <span class="demonstration">不显示间断点</span>
    <el-slider
      v-model="value1"
      :step="10">
    </el-slider>
  </div>
  <div class="block">
    <span class="demonstration">显示间断点</span>
    <el-slider
      v-model="value2"
      :step="10"
      show-stops>
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 0
      }
    }
  }
</script>

显示代码

通过输入框设置精确数值

设置show-input属性会在右侧显示一个输入框

显示代码

范围选择

支持选择某一数值范围

设置即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

<template>
  <div class="block">
    <el-slider
      v-model="value"
      range
      show-stops
      :max="10">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [4, 8]
      }
    }
  }
</script>

显示代码

设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性

显示代码

展示标记

<template>
  <div class="block">
    <el-slider
      v-model="value"
      range
      :marks="marks">
    </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: [30, 60],
        marks: {
          0: '0°C',
          8: '8°C',
          37: '37°C',
          50: {
            style: {
              color: '#1989FA'
            },
            label: this.$createElement('strong', '50%')
          }
        }
      }
    }
  }
</script>

显示代码

Events