X-Next

Appearance

Slider 滑块 ​

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

基础用法 ​

当前值：30
vue
<template>
  <x-slider v-model="value" :min="0" :max="100" />
</template>

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

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

禁用状态 ​

vue
<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>

步长和刻度 ​

当前值：20
vue
<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>

尺寸 ​

尺寸会影响轨道厚度、滑块直径与刻度文字字号。

vue
<template>
  <x-slider v-model="value" size="mini" />
  <x-slider v-model="value" size="small" />
  <x-slider v-model="value" size="medium" />
  <x-slider v-model="value" size="large" />
</template>

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

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

范围选择 ​

当前范围：20 - 80
vue
<template>
  <x-slider v-model="range" range :min="0" :max="100" aria-label="价格范围" />
</template>

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

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

独立使用时可给手柄设置 aria-label。id 和 ARIA 属性会传到真实滑块，范围第二端使用 ID-end；放入 Form 后会自动关联字段标签和帮助说明。禁用手柄退出 Tab 序列。

显示输入框 ​

vue
<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>

垂直方向 ​

vue
<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 ​

vue
<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>

事件 ​

等待操作
vue
<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>

在 Form 中校验 ​

组件放进 x-form-item 后会自动继承 Form 的尺寸与禁用状态，并按 FormItem 的校验规则展示错误。默认 validateTrigger 为 change，即值变化时触发校验。

vue
<template>
  <x-form ref="formRef" :model="formState" :rules="formRules">
    <x-form-item field="threshold" label="阈值">
      <x-slider v-model="formState.threshold" :min="0" :max="100" show-input />
    </x-form-item>
    <x-form-item>
      <x-space>
        <x-button type="primary" @click="handleValidate">校验</x-button>
        <x-button @click="handleReset">重置</x-button>
      </x-space>
    </x-form-item>
  </x-form>
  <p role="status">{{ validateResult }}</p>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FieldRule } from 'x-next';

const formState = reactive({ threshold: 0 });
const formRules: Record<string, FieldRule[]> = {
  threshold: [{ required: true, type: 'number', min: 1, message: '请设置阈值' }],
};
const formRef = ref<FormInstance>();
const validateResult = ref('');

const handleValidate = async () => {
  const errors = await formRef.value!.validate();
  validateResult.value = errors
    ? `校验失败：${Object.values(errors).map((error) => error.message).join('；')}`
    : '校验通过';
};
const handleReset = () => {
  formRef.value!.resetFields();
  validateResult.value = '已重置';
};
</script>

按需导入 ​

ts
import { Slider } from 'x-next';

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

ts
import 'x-next/style/base.css';
import 'x-next/style/form-slider.css';

Props ​

参数说明类型默认值
modelValue绑定值number | [number, number] | number[]undefined
defaultValue默认值，非受控模式number | [number, number]0
step步长number1
min最小值number0
max最大值number100
marks刻度标签Record<number, string>-
direction滑动方向'horizontal' | 'vertical''horizontal'
disabled是否禁用booleanfalse
showTicks是否显示刻度线booleanfalse
showInput是否显示输入框booleanfalse
range是否开启范围选择booleanfalse
formatTooltip格式化 tooltip 内容(value?: string | number) => string-
showTooltip是否显示 tooltipbooleantrue
tooltipPositiontooltip 展示位置'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'横向 'top'，垂直 'right'
size组件尺寸'mini' | 'small' | 'medium' | 'large'跟随全局配置

Events ​

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