Slider 滑块

允许用户在给定范围内选择值的输入控件。

基础用法

Value: 50

Example

范围选择

如果绑定值是一个数组，它会自动渲染为双滑块范围选择器。

Range: 25 - 75

Example

刻度与步长

你可以设置步长值，并使用 marks 属性显示自定义刻度。使用 showTooltip 在悬停/拖动时显示当前值。

0°C

20°C

50°C

100°C

Example

尺寸

使用 size 属性来控制滑块的大小。支持的尺寸有 xs, sm, md (默认), lg, xl, 2xl。

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

2X Large (2xl)

Example

状态

使用 disabled 属性禁用滑块，或使用 isError 属性显示验证错误状态。

Disabled:

Error:

Example

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 轻松覆盖默认滑块外观（颜色、背景）。

Themed Slider

Example

局部定制 (TailwindCSS)

你可以直接传递 Tailwind 类来定位滑块的特定部分。

<template>
  <div class="w-[60%] py-8">
    <BrSlider 
      v-model="value" 
      class="[&_[data-radix-slider-range]]:bg-green-500 [&_[data-radix-slider-thumb]]:border-green-500 [&_[data-radix-slider-thumb]]:border-4"
    />
  </div>
</template>

API

Props

属性名	类型	默认值	说明
modelValue	number | number[]	undefined	滑块的绑定值。数组用于范围滑块。
defaultValue	number | number[]	[0]	非受控状态的默认值。
min	number	0	最小值。
max	number	100	最大值。
step	number	1	步长。
disabled	boolean	false	是否禁用滑块。
orientation	'horizontal' | 'vertical'	'horizontal'	滑块方向。
dir	'ltr' | 'rtl'	'ltr'	阅读方向。
inverted	boolean	false	是否视觉反转滑块。
minStepsBetweenThumbs	number	0	滑块之间的最小步数。
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'	滑块尺寸变体。
marks	boolean | Record<number, string>	false	轨道上的自定义刻度。
showTooltip	boolean | 'always' | 'hover'	false	悬停/激活时显示提示。
isError	boolean	false	表单验证的错误状态。

Emits

事件名	说明	参数
update:modelValue	当值改变时触发	(value: number | number[])
valueCommit	当交互结束时触发（例如鼠标抬起）	(value: number | number[])