Slider 滑动输入条

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

何时使用

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

代码演示

Disabled:
基本

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

<template>
  <div>
    <a-slider id="test" v-model:value="value1" :disabled="disabled" />
    <a-slider range v-model:value="value2" :disabled="disabled" />
    Disabled:
    <a-switch size="small" v-model:checked="disabled" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const value1 = ref<number>(0);
    const value2 = ref<number[]>([20, 50]);
    const disabled = ref<boolean>(false); 
    return {
      value1,
      value2,
      disabled,
    };
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
带 icon 的滑块

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

<template>
  <div class="icon-wrapper">
    <frown-outlined :style="{ color: preColor }" />
    <a-slider :min="0" :max="20" v-model:value="sliderValue" />
    <smile-outlined :style="{ color: nextColor }" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    FrownOutlined,
    SmileOutlined,
  },
  setup() {
    const sliderValue = ref<number>(0);
    const min = ref<number>(0);
    const max = ref<number>(20); 
    const preColor = computed(() => {
      const mid = +((max.value - min.value) / 2).toFixed(5);
      return sliderValue.value >= mid ? '' : 'rgba(0, 0, 0, .45)';
    }); 
    const nextColor = computed(() => {
      const mid = +((max.value - min.value) / 2).toFixed(5);
      return sliderValue.value >= mid ? 'rgba(0, 0, 0, .45)' : '';
    }); 
    return {
      sliderValue,
      min,
      max,
      preColor,
      nextColor,
    };
  },
});
</script>
<style scoped>
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
} 
.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.25);
} 
.icon-wrapper .anticon:first-child {
  left: 0;
} 
.icon-wrapper .anticon:last-child {
  right: 0;
}
</style>
事件

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

<template>
  <div class="code-box-demo">
    <a-slider v-model:value="value1" @afterChange="onAfterChange" />
    <a-slider range :step="10" v-model:value="value2" @afterChange="onAfterChange" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const value1 = ref<number>(30);
    const value2 = ref<number[]>([20, 50]); 
    const onAfterChange = (value: number) => {
      console.log('afterChange: ', value);
    }; 
    return {
      value1,
      value2,
      onAfterChange,
    };
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
0°C26°C37°C100°C
垂直

垂直方向的 Slider。

<template>
  <div style="height: 300px">
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider vertical v-model:value="value1" />
    </div>
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider vertical range :step="10" v-model:value="value2" />
    </div>
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider vertical range :marks="marks" v-model:value="value3" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode } from 'vue';
export default defineComponent({
  setup() {
    const value1 = ref<number>(30);
    const value2 = ref<number[]>([20, 50]);
    const value3 = ref<number[]>([26, 37]);
    const marks = ref<Record<number, any>>({
      0: '0°C',
      26: '26°C',
      37: '37°C',
      100: {
        style: {
          color: '#f50',
        },
        label: createVNode('strong', {}, '100°C'),
      },
    }); 
    return {
      value1,
      value2,
      value3,
      marks,
    };
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
Reversed:
反向

设置 reverse 可以将滑动条置反。

<template>
  <div>
    <a-slider v-model:value="value1" :reverse="reverse" />
    <a-slider range v-model:value="value2" :reverse="reverse" />
    Reversed:
    <a-switch size="small" v-model:checked="reverse" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const value1 = ref<number>(30);
    const value2 = ref<number[]>([20, 50]);
    const reverse = ref<boolean>(true); 
    return {
      value1,
      value2,
      reverse,
    };
  },
});
</script>
带输入框的滑块

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

<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-slider v-model:value="inputValue1" :min="1" :max="20" />
      </a-col>
      <a-col :span="4">
        <a-input-number v-model:value="inputValue1" :min="1" :max="20" style="margin-left: 16px" />
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-slider v-model:value="inputValue" :min="0" :max="1" :step="0.01" />
      </a-col>
      <a-col :span="4">
        <a-input-number
          v-model:value="inputValue"
          :min="0"
          :max="1"
          :step="0.01"
          style="margin-left: 16px"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const inputValue = ref<number>(0);
    const inputValue1 = ref<number>(1);
    return {
      inputValue,
      inputValue1,
    };
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
自定义提示

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

<template>
  <div>
    <a-slider :tip-formatter="formatter" />
    <a-slider :tip-formatter="null" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const disabled = ref<boolean>(false);
    const formatter = (value: number) => {
      return `${value}%`;
    }; 
    return {
      disabled,
      formatter,
    };
  },
});
</script>

included=true

0°C26°C 37°C100°C
0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C 37°C100°C

step=null

0°C26°C 37°C100°C
带标签的滑块

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

<template>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <a-slider :marks="marks" v-model:value="value1" />
    <a-slider range :marks="marks" v-model:value="value2" /> 
    <h4>included=false</h4>
    <a-slider :marks="marks" :included="false" v-model:value="value3" /> 
    <h4>marks & step</h4>
    <a-slider :marks="marks" :step="10" v-model:value="value4" /> 
    <h4>step=null</h4>
    <a-slider :marks="marks" :step="null" v-model:value="value5" />
  </div>
</template>
<script lang="ts">
import { defineComponent, createVNode, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const value1 = ref<number>(37);
    const value2 = ref<number[]>([26, 37]);
    const value3 = ref<number>(37);
    const value4 = ref<number>(37);
    const value5 = ref<number>(37);
    const marks = ref<Record<number, any>>({
      0: '0°C',
      26: '26°C',
      37: '37°C',
      100: {
        style: {
          color: '#f50',
        },
        label: createVNode('strong', {}, '100°C'),
      },
    }); 
    return {
      value1,
      value2,
      value3,
      value4,
      value5,
      marks,
    };
  },
});
</script>
<style scoped>
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}
</style>
控制 ToolTip 的显示

当 tooltipVisible 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。

<template>
  <a-slider v-model:value="value" :tooltip-visible="true" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const value = ref<number>(30); 
    return {
      value,
    };
  },
});
</script>

API#

参数 说明 类型 默认值 版本
autofocus 自动获取焦点 boolean false
disabled 值为 true 时，滑块为禁用状态 boolean false
dots 是否只能拖拽到刻度上 boolean false
included marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 boolean true
marks 刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 object { number: string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }
max 最大值 number 100
min 最小值 number 0
range 双滑块模式 boolean false
reverse 反向坐标轴 boolean false 1.5.0
step 步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。 number|null 1
tipFormatter Slider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip。 Function|null IDENTITY
value(v-model) 设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number] number|number[]
vertical 值为 true 时，Slider 为垂直方向 Boolean false
tooltipPlacement 设置 Tooltip 展示位置。参考 Tooltip。 string 1.5.0
tooltipVisible 值为true时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 Boolean
getTooltipPopupContainer Tooltip 渲染父节点，默认渲染到 body 上。 Function () => document.body 1.5.0

事件

事件名称 说明 回调参数
afterChange 与 mouseup 触发时机一致，把当前值作为参数传入。 Function(value)
change 当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。 Function(value)

方法

名称 描述
blur() 移除焦点
focus() 获取焦点