表单

Slider 范围滑杆

用于范围滑杆场景的 MoriUI 组件。

资源

导入

import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

组合方式

Slider 组合 Track、Range 与一个或多个 Thumb；Thumb 数量应与 v-model 数组长度一致。

范围与多控制点

两个值表示范围，更多值创建多个控制点；minStepsBetweenThumbs 可约束相邻值间距。

垂直方向

orientation="vertical" 切换布局与上下方向键，控件仍使用同一 Track/Range/Thumb 组合。

受控与禁用

v-model 实时同步 number[]；valueCommit 只在一次拖动或键盘操作结束后触发，disabled 阻止交互。

RTL

水平 Slider 的方向键与值增长方向遵循 dir，垂直方向不受文字流影响。

示例

概览

单控制点选择 0 到 100 的值。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const value = shallowRef([75])
</script>

<template>
  <Slider
    v-model="value"
    :max="100"
    :step="1"
    aria-label="音量"
    class="mx-auto w-full max-w-xs"
  >
    <SliderTrack><SliderRange /></SliderTrack><SliderThumb />
  </Slider>
</template>

范围

两个 Thumb 选择起点与终点。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const range = shallowRef([25, 50])
</script>

<template>
  <Slider
    v-model="range"
    :max="100"
    :step="5"
    class="mx-auto w-full max-w-xs"
  >
    <SliderTrack><SliderRange /></SliderTrack>
    <SliderThumb aria-label="范围起点" /><SliderThumb aria-label="范围终点" />
  </Slider>
</template>

多个控制点

三个值创建三个可独立操作的 Thumb。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const values = shallowRef([10, 20, 70])
</script>

<template>
  <Slider
    v-model="values"
    :max="100"
    :step="10"
    class="mx-auto w-full max-w-xs"
  >
    <SliderTrack><SliderRange /></SliderTrack>
    <SliderThumb v-for="(_, index) in values" :key="index" :aria-label="`控制点 ${index + 1}`" />
  </Slider>
</template>

垂直

两条垂直 Slider 使用上下方向键。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const primary = shallowRef([50])
  const secondary = shallowRef([25])
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
    <Slider
      v-model="primary"
      :max="100"
      :step="1"
      orientation="vertical"
      aria-label="主通道"
      class="h-40"
    >
      <SliderTrack><SliderRange /></SliderTrack><SliderThumb />
    </Slider>
    <Slider
      v-model="secondary"
      :max="100"
      :step="1"
      orientation="vertical"
      aria-label="辅助通道"
      class="h-40"
    >
      <SliderTrack><SliderRange /></SliderTrack><SliderThumb />
    </Slider>
  </div>
</template>

受控

v-model 实时显示两个温度边界。

温度范围0.3，0.7

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import {
    Field,
    FieldLabel,
    Slider,
    SliderRange,
    SliderThumb,
    SliderTrack
  } from 'moriui'

  const temperature = shallowRef([0.3, 0.7])
</script>

<template>
  <Field class="mx-auto w-full max-w-xs">
    <div class="flex items-center justify-between gap-2">
      <FieldLabel>温度范围</FieldLabel>
      <span class="text-muted-foreground text-sm">{{ temperature.join('，') }}</span>
    </div>
    <Slider
      v-model="temperature"
      :min="0"
      :max="1"
      :step="0.1"
    >
      <SliderTrack><SliderRange /></SliderTrack>
      <SliderThumb aria-label="最低温度" /><SliderThumb aria-label="最高温度" />
    </Slider>
  </Field>
</template>

禁用

disabled 保留当前值并阻止操作。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const value = shallowRef([50])
</script>

<template>
  <Slider
    v-model="value"
    :max="100"
    :step="1"
    aria-label="禁用的音量"
    class="mx-auto w-full max-w-xs"
    disabled
  >
    <SliderTrack><SliderRange /></SliderTrack><SliderThumb />
  </Slider>
</template>

RTL

水平滑杆在 RTL 方向中调整值。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Slider, SliderRange, SliderThumb, SliderTrack } from 'moriui'

  const value = shallowRef([75])
</script>

<template>
  <Slider
    v-model="value"
    :max="100"
    :step="1"
    aria-label="مستوى الصوت"
    class="mx-auto w-full max-w-xs"
    dir="rtl"
  >
    <SliderTrack><SliderRange /></SliderTrack><SliderThumb />
  </Slider>
</template>

API

属性	类型	默认值	说明
Slider v-model	`number[] \| null`	`[0]`	按 Thumb 顺序排列的当前值。
Slider defaultValue	`number[]`	`[0]`	非受控初始值，同时决定初始 Thumb 数量。
Slider min / max / step	`number`	`0 / 100 / 1`	数值范围与步进。
Slider orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	布局与键盘导航方向。
Slider disabled / inverted	`boolean`	`false`	禁用交互与反转视觉值方向。
Slider minStepsBetweenThumbs	`number`	`0`	相邻 Thumb 之间允许的最小步数。
Slider thumbAlignment	`'contain' \| 'overflow'`	`'contain'`	Thumb 在轨道边界内的对齐方式。
Slider @valueCommit	`(value: number[]) => void`	`—`	一次值修改交互结束时触发。

无障碍说明

Slider 复用 Reka UI 的 slider ARIA、Home/End、Page Up/Page Down、方向键和隐藏表单输入。每个 Thumb 都应通过 aria-label 或关联标签获得名称；范围 Slider 需分别说明起点和终点。

关联组件

这个组件暂时没有登记关联条目。