Slider 滑动输入条

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

何时使用

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

示例

基础滑块：

<template>
  <f-slider v-model:value="value1" />
  <br />
  <f-slider v-model:value="value2" range />

  <div style="display: flex; margin-top: 100px">
    <div style="height: 200px; margin-right: 100px">
      <f-slider v-model:value="value1" vertical />
    </div>
    <div style="height: 200px; margin-right: 100px">
      <f-slider v-model:value="value2" range vertical />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(5)
const value2 = ref([10, 20])
</script>

<style lang="scss" scoped></style>

带图标滑块：

<template>
  <div class="icon-wrapper">
    <frown-outlined />
    <f-slider v-model:value="value" />
    <smile-outlined />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FrownOutlined, SmileOutlined } from '@ant-design/icons-vue'

const value = ref(1)
</script>

<style lang="scss" scoped>
.icon-wrapper {
  position: relative;
  padding: 0 21.5px; // 设计师?
  .anticon {
    position: absolute;
    top: -2px;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.25);
  }

  .anticon:first-child {
    left: 0;
  }

  .anticon:last-child {
    right: 0;
  }
}
</style>

带标签滑块：

<template>
  <br />
  <f-slider v-model:value="value1" :marks="marks" />
  <br />
  <br />
  <f-slider v-model:value="value2" range :marks="marks" />
  <br />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(50)
const value2 = ref([25, 75])

const marks = {
  0: '0km',
  25: '25km',
  50: '50km',
  75: '75km',
  100: '100km',
}
</script>

<style lang="scss" scoped></style>

API

参数	说明	类型	默认值	版本
autofocus	自动获取焦点	boolean	false
disabled	值为 true 时，滑块为禁用状态	boolean	false
dots	是否只能拖拽到刻度上	boolean	false
getTooltipPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上。	Function	() => document.body	1.5.0
included	marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列	boolean	true
mark	自定义刻度标记	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	双滑块模式	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
tooltipPlacement	设置 Tooltip 展示位置。参考 TooltipAPI。	string		1.5.0
tooltipVisible	值为true时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。	Boolean
value(v-model)	设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]	`number	number[]`
vertical	值为 true 时，Slider 为垂直方向	Boolean	false

事件

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

方法

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