Slider 滑块

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

组件特性

🎚️ 单值和范围：支持单个值和范围（双滑块）选择。
📏 多种尺寸：支持 sm、md、lg 尺寸规格。
🏷️ 刻度标记：支持通过 show-mark 属性显示刻度标记。
💬 提示框：支持通过 show-tooltip 属性在拖动时显示提示框。
⌨️ 键盘支持：完整的键盘导航，支持方向键。
🔢 步长控制：支持 step 属性控制值增量。
❌ 禁用状态：支持 disabled 属性。
⚠️ 错误状态：支持 error 属性显示错误状态。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { BrSlider } from '@breezeui/vue'

const value = ref(50)
</script>

<template>
  <div class="w-[60%] py-8">
    <BrSlider v-model="value" :max="100" :step="1" />
    <div class="mt-4 text-sm text-muted-foreground">Value: {{ value }}</div>
  </div>
</template>

范围选择

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrSlider } from '@breezeui/vue'

const range = ref([25, 75])
</script>

<template>
  <div class="w-[60%] py-8">
    <BrSlider v-model="range" :max="100" :step="1" />
    <div class="mt-4 text-sm text-muted-foreground">Range: {{ range[0] }} - {{ range[1] }}</div>
  </div>
</template>

刻度与步长

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrSlider } from '@breezeui/vue'

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

<template>
  <div class="w-[60%] py-8">
    <BrSlider 
      v-model="value" 
      :max="100" 
      :step="10" 
      :marks="marks" 
      show-tooltip 
    />
  </div>
</template>

尺寸

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrSlider } from '@breezeui/vue'

const valueXs = ref(50)
const valueSm = ref(50)
const valueMd = ref(50)
const valueLg = ref(50)
const valueXl = ref(50)
const value2xl = ref(50)
</script>

<template>
  <div class="w-[60%] space-y-8 py-8">
    <div class="space-y-4">
      <div class="text-sm font-medium">Extra Small (xs)</div>
      <BrSlider v-model="valueXs" size="xs" />
    </div>
    
    <div class="space-y-4">
      <div class="text-sm font-medium">Small (sm)</div>
      <BrSlider v-model="valueSm" size="sm" />
    </div>

    <div class="space-y-4">
      <div class="text-sm font-medium">Medium (md) - Default</div>
      <BrSlider v-model="valueMd" size="md" />
    </div>

    <div class="space-y-4">
      <div class="text-sm font-medium">Large (lg)</div>
      <BrSlider v-model="valueLg" size="lg" />
    </div>
    
    <div class="space-y-4">
      <div class="text-sm font-medium">Extra Large (xl)</div>
      <BrSlider v-model="valueXl" size="xl" />
    </div>
    
    <div class="space-y-4">
      <div class="text-sm font-medium">2X Large (2xl)</div>
      <BrSlider v-model="value2xl" size="2xl" />
    </div>
  </div>
</template>

状态

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrSlider } from '@breezeui/vue'

const value1 = ref(40)
const value2 = ref(60)
</script>

<template>
  <div class="w-[60%] space-y-12 py-8">
    <div>
      <div class="mb-4 text-sm font-medium">Disabled:</div>
      <BrSlider v-model="value1" disabled />
    </div>
    
    <div>
      <div class="mb-4 text-sm font-medium text-destructive">Error:</div>
      <BrSlider v-model="value2" is-error />
    </div>
  </div>
</template>

主题定制

全局定制 (BrConfigProvider)

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

<script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrSlider } from '@breezeui/vue'

const customTheme = ref({
  primary: '262.1 83.3% 57.8%',
  background: '222.2 84% 4.9%',
  foreground: '210 40% 98%',
  popover: '222.2 84% 4.9%',
  'popover-foreground': '210 40% 98%',
  secondary: '217.2 32.6% 17.5%',
})

const value = ref(50)
</script>

<template>
  <BrConfigProvider :theme="customTheme">
    <div class="p-8 bg-background text-foreground transition-colors rounded-lg border border-border">
      <h3 class="mb-4 text-lg">Themed Slider</h3>
      <BrSlider v-model="value" show-tooltip />
    </div>
  </BrConfigProvider>
</template>

局部定制 (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[])`

#Slider 滑块

#组件特性

#基础用法

#范围选择

#刻度与步长

#尺寸

#状态

#主题定制

#全局定制 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#Props

#Emits