滑块 Slider

#基础用法

Volume40

slider/basic.vue

<script setup lang="ts">
import { Slider } from "@bysages/vue";
</script>

<template>
  <Slider.Root :default-value="[40]" :min="0" :max="100" :step="1">
    <div class="flex justify-between items-baseline">
      <Slider.Label>Volume</Slider.Label>
      <Slider.ValueText />
    </div>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#DraggingIndicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#MarkerGroup

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Marker

属性	类型	默认值	描述
`value`	`number`		—

#Range

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	滑块手柄的尺寸档位
`aria-label`	`string[]`		每个滑块手柄的 `aria-label`，用于提供可访问名称
`aria-labelledby`	`string[]`		为每个滑块手柄提供标签的元素 `id`，用于提供可访问名称
`defaultValue`	`number[]`		滑块渲染时的初始值；不需要控制滑块值时使用
`dir`	`'ltr' \| 'rtl'`	`"ltr"`	文档的文本书写方向
`disabled`	`boolean`		滑块是否禁用
`form`	`string`		底层 `input` 元素关联的表单
`getAriaValueText`	`(details: slider.ValueTextDetails) => string`		返回滑块手柄人类可读值的函数
`getRootNode`	`() => ShadowRoot \| Document \| Node`		在 iframe、Electron 等自定义环境中正确解析 `document` 的根节点
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; thumb(index: number): string; hiddenInput(index: number): string; control: string; track: string; range: string; label: string; valueText: string; marker(index: number): string; }>`		滑块各元素的 id，适合组合使用
`invalid`	`boolean`		滑块是否无效
`largeStep`	`number`	`10 * step`	按住 Shift 或按 Page Up/Page Down 时数值的增减量
`max`	`number`	`100`	滑块最大值
`min`	`number`	`0`	滑块最小值
`minStepsBetweenThumbs`	`number`	`0`	多个滑块手柄之间允许的最小步数
`modelValue`	`number[]`		滑块的 `v-model` 值
`name`	`string`		每个滑块手柄关联的 `name`，用于表单
`orientation`	`'vertical' \| 'horizontal'`	`"horizontal"`	滑块的方向
`origin`	`'start' \| 'center'`	`"start"`	滑块范围的起点：`start` 适合绝对值，`center` 适合相对偏移
`readOnly`	`boolean`		滑块是否只读
`step`	`number`	`1`	滑块的步长
`thumbAlignment`	`'center' \| 'contain'`	`"contain"`	滑块手柄相对轨道的对齐方式：`center` 可超出轨道边界，`contain` 保持在轨道边界内
`thumbCollisionBehavior`	`'none' \| 'push' \| 'swap'`	`"none"`	指针交互时滑块手柄相撞的行为：`none` 不能互相越过，`push` 相互推动，`swap` 交换位置
`thumbSize`	`{ width: number; height: number; }`		滑块手柄尺寸

#Thumb

属性	类型	默认值	描述
`index`	`number`		—
`name`	`string \| undefined`		—

#Track

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。