Slider 滑块

用于在连续区间内选择数值，适合音量、比例、进度等场景。

基础用法

当前值：30

<template>
  <x-slider v-model="value" :min="0" :max="100" />
</template>

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

const value = ref(30);
</script>

禁用状态

<template>
  <x-slider v-model="value" disabled show-ticks :step="10" />
</template>

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

const value = ref(50);
</script>

步长和刻度

0%

50%

100%

当前值：20

<template>
  <x-slider v-model="value" :step="10" show-ticks :marks="marks" />
</template>

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

const value = ref(20);
const marks = {
  0: '0%',
  50: '50%',
  100: '100%',
};
</script>

范围选择

当前范围：20 - 80

<template>
  <x-slider v-model="range" range :min="0" :max="100" />
</template>

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

const range = ref<[number, number]>([20, 80]);
</script>

显示输入框

<template>
  <x-slider v-model="value" show-input />
  <x-slider v-model="range" range show-input />
</template>

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

const value = ref(36);
const range = ref<[number, number]>([15, 65]);
</script>

垂直方向

0

50

100

<template>
  <x-slider
    v-model="value"
    direction="vertical"
    :marks="{ 0: '0', 50: '50', 100: '100' }"
  />
  <x-slider v-model="range" direction="vertical" range show-input />
</template>

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

const value = ref(45);
const range = ref<[number, number]>([20, 70]);
</script>

Tooltip

<template>
  <x-slider v-model="value" :format-tooltip="formatTooltip" tooltip-position="top" />
  <x-slider v-model="value" :show-tooltip="false" />
</template>

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

const value = ref(25);
const formatTooltip = (val?: string | number) => `${val}%`;
</script>

事件

等待操作

<template>
  <x-slider
    v-model="value"
    @change="(val) => log = `change: ${JSON.stringify(val)}`"
    @change-end="(val) => log = `change-end: ${JSON.stringify(val)}`"
  />
  <p>{{ log }}</p>
</template>

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

const value = ref(40);
const log = ref('等待操作');
</script>

按需导入

import { Slider } from 'x-next';

Props

参数	说明	类型	默认值
modelValue	绑定值	number | [number, number] | number[]	undefined
defaultValue	默认值，非受控模式	number | [number, number]	0
step	步长	number	1
min	最小值	number	0
max	最大值	number	100
marks	刻度标签	Record<number, string>	-
direction	滑动方向	'horizontal' | 'vertical'	'horizontal'
disabled	是否禁用	boolean	false
showTicks	是否显示刻度线	boolean	false
showInput	是否显示输入框	boolean	false
range	是否开启范围选择	boolean	false
formatTooltip	格式化 tooltip 内容	(value?: string | number) => string	-
showTooltip	是否显示 tooltip	boolean	true
tooltipPosition	tooltip 展示位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'	横向 'top'，垂直 'right'

Events

事件名	说明	回调参数
update:modelValue	值更新时触发	value
change	值变化时触发，拖动过程中会连续触发	value
change-end	点击、输入、键盘调整或拖拽结束后触发	value