Slider

An input where the user selects a value from within a given range.

Component Features

🎚️ Single & Range: Supports single value and range (dual thumb) selection.
📏 Multiple Sizes: Supports sm, md, lg size specs.
🏷️ Tick Marks: Supports displaying tick marks with show-mark prop.
💬 Tooltip: Supports tooltip display during drag via show-tooltip prop.
⌨️ Keyboard Support: Full keyboard navigation with arrow keys.
🔢 Step Control: Supports step prop to control value increments.
❌ Disabled State: Supports disabled prop.
⚠️ Error State: Supports error prop to display error state.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

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

Range

If the bound value is an array, it automatically renders as a dual-thumb range slider.

<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 & Steps

You can set step values and use the marks prop to display custom marks. Use showTooltip to display the current value on hover/drag.

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

Sizes

Use the size prop to control the size of the slider. Supported sizes are xs, sm, md (default), 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>

States

Use the disabled prop to disable the slider, or the isError prop to show a validation error state.

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

Theming

Global Customization (BrConfigProvider)

You can easily override the default slider appearance (colors, background) using the 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>

Local Customization (TailwindCSS)

You can pass Tailwind classes directly to target specific parts of the slider.

<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

Name	Type	Default	Description
`modelValue`	`number \| number[]`	`undefined`	Bound value of the slider. Array for range slider.
`defaultValue`	`number \| number[]`	`[0]`	Default value for uncontrolled state.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Step size.
`disabled`	`boolean`	`false`	Whether the slider is disabled.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the slider.
`dir`	`'ltr' \| 'rtl'`	`'ltr'`	Reading direction.
`inverted`	`boolean`	`false`	Whether to visually invert the slider.
`minStepsBetweenThumbs`	`number`	`0`	Minimum permitted steps between thumbs.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	Size variant of the slider.
`marks`	`boolean \| Record<number, string>`	`false`	Custom marks on the track.
`showTooltip`	`boolean \| 'always' \| 'hover'`	`false`	Show tooltip on hover/active.
`isError`	`boolean`	`false`	Error state for form validation.

Emits

Name	Description	Parameters
`update:modelValue`	Triggered when value changes	`(value: number \| number[])`
`valueCommit`	Triggered when interaction ends (e.g. mouse up)	`(value: number \| number[])`

#Slider

#Component Features

#Basic Usage

#Range

#Marks & Steps

#Sizes

#States

#Theming

#Global Customization (BrConfigProvider)

#Local Customization (TailwindCSS)

#API

#Props

#Emits