Slider

<BaseSlider /> · A range indicator element.

vue

<template>
  <BaseSlider v-model="range" />
</template>

<script setup lang="ts">
const range = ref([62])
</script>

Features

Can be controlled or uncontrolled
Supports multiple thumbs
Supports a minimum value between thumbs
Supports touch or click on track to update value
Supports Right to Left direction
Full keyboard navigation

Anatomy

This component is self closing and can be used to create range sliders.

vue

<template>
  <BaseSlider />
</template>

API Reference

This component has props that you can use to modify its visual style.

Model	Type
`model-value`	`number[] \| null` The controlled value of the slider. Can be bind as `v-model`.

Prop	Type
`variant` default:`"default"`	`"default" \| "primary" \| "dark" \| "none"`
`classes` default:`{}`	`{ track?: string \| string[]; range?: string \| string[]; thumb?: string \| string[]; tooltip?: string \| string[]; tooltipArrow?: string \| string[]; }` Optional classes to pass to the inner components.
`default-value` default:`-`	`number[]` The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with the slider.
`orientation` default:`-`	`DataOrientation` The orientation of the slider.
`dir` default:`-`	`Direction` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`inverted` default:`-`	`boolean` Whether the slider is visually inverted.
`min` default:`-`	`number` The minimum value for the range.
`max` default:`-`	`number` The maximum value for the range.
`step` default:`-`	`number` The stepping interval.
`min-steps-between-thumbs` default:`-`	`number` The minimum permitted steps between multiple thumbs.
`thumb-alignment` default:`-`	`ThumbAlignment` The alignment of the slider thumb. - `contain`: thumbs will be contained within the bounds of the track. - `overflow`: thumbs will not be bound by the track. No extra offset will be added.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`name` default:`-`	`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required` default:`-`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Event	Emitted Value Type
`value-commit`	`[payload: number[]]`

Slot	Type
`#default`	`{ value: number; }`

Customization

Your can override the component default CSS variables in your main.css file.

css

@theme {
  /* Default progress bar variables */
  --color-track-default-bg: var(--color-muted-200);
  --color-track-default-bg-active: var(--color-muted-500);
  --color-track-default-bg-invert: var(--color-white);
  --color-track-default-handle-bg: var(--color-white);
  --color-track-default-handle-border: var(--color-muted-300);
  --color-track-default-handle-ring: var(--color-track-default-bg-active);

  /* Dark progress bar variables */
  --color-track-dark-bg: var(--color-muted-200);
  --color-track-dark-bg-active: var(--color-muted-900);
  --color-track-dark-bg-invert: var(--color-white);
  --color-track-dark-handle-bg: var(--color-white);
  --color-track-dark-handle-border: var(--color-muted-300);
  --color-track-dark-handle-ring: var(--color-track-dark-bg-active);
}

Examples

Variants

Use the variant prop to change the color of the progress bar. Set it to none to remove the default color and apply your own.

vue

<template>
  <BaseSlider v-model="range" />
  <BaseSlider v-model="range" variant="primary" />
  <BaseSlider v-model="range" variant="dark" />
  <BaseSlider
    v-model="range"
    variant="none"
    class="text-pink-500"
    :classes="{
      tooltip: 'bg-pink-100 dark:bg-pink-900 text-pink-900 dark:text-pink-50',
      tooltipArrow: 'fill-pink-100 dark:fill-pink-900',
    }"
  />
</template>

<script setup lang="ts">
const range = ref(76)
</script>

Multiple handles

Use the v-model prop to set the value of the slider. You can also use an array to set multiple values.

vue

<template>
  <BaseSlider v-model="range" />
</template>

<script setup lang="ts">
const range = ref([29, 62, 77])
</script>

Orientation

Use the orientation prop to change the direction of the slider. Set it to vertical to make it vertical.

vue

<template>
  <BaseSlider v-model="range" orientation="vertical" />
</template>

<script setup lang="ts">
const range = ref(76)
</script>

Controlled

Sliders can be controlled by setting the v-model prop or uncontrolled by setting the value prop.

vue

<template>
  <BaseSlider
    variant="dark"
    :default-value="[40]"
    :min="10"
    :max="60"
    :step="10"
  />
  <BaseSlider
    v-slot="{ value }"
    variant="dark"
    :default-value="[30, 40]"
    :min="10"
    :max="60"
    :step="2"
    :min-steps-between-thumbs="5"
  >
    {{ value }}%
  </BaseSlider>
</template>

Select

Snack

Edit this page on Github