Slider滑动输入条

Slider是滑动型输入器，用于展示当前值和可选范围，适用于用户在数值区间或自定义区间内进行选择，可选值可为连续或离散值。

代码演示

基本滑动条 当range为true时渲染为双滑块，disabled为true时滑块不可用，示例如下：

Disabled:

vue

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

带输入框的滑块 与数字输入框组件保持同步：

vue

<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" setup>
import { ref } from 'vue';
const inputValue = ref<number>(0);
const inputValue1 = ref<number>(1);
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>

带icon的滑块 滑块左右可设置图标，代码如下：

vue

<template>
  <div class="icon-wrapper">
    <frown-outlined :style="{ color: preColor }" />
    <a-slider v-model:value="sliderValue" :min="0" :max="20" />
    <smile-outlined :style="{ color: nextColor }" />
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons-vue';
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)' : '';
});
</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>

自定义提示 使用tipFormatter格式化Tooltip内容，设为null则隐藏Tooltip：

vue

<template>
  <div>
    <a-slider :tip-formatter="formatter" />
    <a-slider :tip-formatter="null" />
  </div>
</template>
<script lang="ts" setup>
const formatter = (value: number) => {
  return `${value}%`;
};
</script>

事件值改变时触发onChange，鼠标松开时触发onAfterChange：

vue

<template>
  <div class="code-box-demo">
    <a-slider v-model:value="value1" @change="onChange" @afterChange="onAfterChange" />
    <a-slider v-model:value="value2" range :step="10" @change="onChange" @afterChange="onAfterChange" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value1 = ref<number>(30);
const value2 = ref<[number, number]>([20, 50]);

const onChange = (value: number) => {
  console.log('onChange: ', value);
};

const onAfterChange = (value: number) => {
  console.log('afterChange: ', value);
};
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>

带标签的滑块 使用marks标注分段式滑块，included控制标记关系，step影响可选值：

included=true

0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C

vue

<template>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <a-slider v-model:value="value1" :marks="marks">
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>
    <a-slider v-model:value="value2" range :marks="marks">
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>

    <h4>included=false</h4>
    <a-slider v-model:value="value3" :marks="marks" :included="false">
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>

    <h4>marks & step</h4>
    <a-slider v-model:value="value4" :marks="marks" :step="10">
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>

    <h4>step=null</h4>
    <a-slider v-model:value="value5" :marks="marks" :step="null">
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value1 = ref<number>(37);
const value2 = ref<[number, 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: '100°C',
  },
});
</script>
<style scoped>
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}
</style>

垂直方向的Slider

0°C26°C37°C100°C

vue

<template>
  <div style="height: 300px">
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider v-model:value="value1" vertical />
    </div>
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider v-model:value="value2" vertical range :step="10" />
    </div>
    <div style="display: inline-block; height: 300px; margin-left: 70px">
      <a-slider v-model:value="value3" vertical range :marks="marks" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, createVNode } from 'vue';
const value1 = ref<number>(30);
const value2 = ref<[number, number]>([20, 50]);
const value3 = ref<[number, 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'),
  },
});
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>

控制ToolTip的显示tooltipOpen为true时始终显示ToolTip：

vue

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

反向设置reverse将滑动条置反：

Reversed:

vue

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

API

参数	说明	类型	默认值	版本
autofocus	自动获取焦点，开启此功能后，组件加载时会自动获取焦点	boolean	false	-
disabled	若设置为`true`，滑块将处于禁用状态，无法进行交互操作	boolean	false	-
dots	设置为`true`时，滑块只能被拖拽到刻度位置上	boolean	false	-
included	当`marks`不为空对象时生效。`true`表示不同标记间的值为包含关系；`false`表示为并列关系	boolean	true	-
mark	可通过具名插槽`v-slot:mark`来自定义刻度标记，接收`point`（刻度值）和`label`（刻度标签）两个参数	v-slot:mark	{ point: number, label: any }	3.0
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	设为`true`时，开启双滑块模式，可同时选择两个值确定一个范围	boolean	false	-
reverse	设置为`true`，将反向显示坐标轴，改变滑块滑动方向	boolean	false	1.5.0
step	步长，取值需大于`0`且能被`(max - min)`整除。当`marks`不为空对象时，可设为`null`，此时滑块可选值仅为`marks`标注的部分	number\|null	1	-
value(v - model)	用于设置当前取值。单滑块时为`number`类型；双滑块模式（`range`为`true`）时为`[number, number]`数组类型	number\|number[]	-	-
vertical	设为`true`，Slider呈垂直方向展示	Boolean	false	-
tipFormatter	Slider将当前值传入`tipFormatter`，`Tooltip`显示其返回值；设为`null`则隐藏`Tooltip`	Function\|null	IDENTITY	-
tooltipPlacement	设置`Tooltip`展示位置，可参考`Tooltip`组件的相关设置	string	-	1.5.0
tooltipOpen	为`true`时，`Tooltip`始终显示；为`false`时，即使在拖动、移入时也不显示	Boolean	-	4.0
getTooltipPopupContainer	指定`Tooltip`的渲染父节点，默认渲染到`body`上	Function	() => document.body	1.5.0

Slider滑动输入条 ​

代码演示 ​

included=true

included=false

marks & step

step=null

API ​

Slider滑动输入条

代码演示

API