Slider

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

Basic Usage

Value: 50

Example

Range

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

Range: 25 - 75

Example

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.

0°C

20°C

50°C

100°C

Example

Sizes

Use the size prop to control the size of the slider. Supported sizes are xs, sm, md (default), lg, xl, 2xl.

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

2X Large (2xl)

Example

States

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

Disabled:

Error:

Example

Theming

Global Customization (BrConfigProvider)

You can easily override the default slider appearance (colors, background) using the BrConfigProvider.

Themed Slider

Example

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[])