Slider 滑动输入条

Slider 滑动输入条

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

何时使用

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

代码演示

基本滑动条。当 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>

垂直

垂直方向的 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>

反向

设置 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>

带标签的滑块

使用 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()	获取焦点

Slider滑动输入条

Slider 滑动输入条

何时使用

代码演示

API

事件

方法