ant-design-vue/components/slider/demo/mark.md

#### 带标签的滑块 使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。 #### Graduated slider Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.

<template>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <a-slider :marks="marks" :defaultValue="37" />
    <a-slider range :marks="marks" :defaultValue="[26, 37]" />

    <h4>included=false</h4>
    <a-slider :marks="marks" :included="false" :defaultValue="37" />

    <h4>marks & step</h4>
    <a-slider :marks="marks" :step="10" :defaultValue="37" />

    <h4>step=null</h4>
    <a-slider :marks="marks" :step="null" :defaultValue="37" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      marks: {
        0: '0°C',
        26: '26°C',
        37: '37°C',
        100: {
          style: {
            color: '#f50',
          },
          label: <strong>100°C</strong>,
        },
      },
    }
  },
  methods: {
    onChange(value) {
      console.log('change: ', value);
    },
    onAfterChange(value) {
      console.log('afterChange: ', value);
    }
  },
}
</script>
<style scoped>
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}
</style>