Slider

Horizontal control for selecting a numeric value or range.

Introduction

Use Slider when users pick a number along a continuous scale—volume, opacity, price bounds, or similar. Optional tooltips show the thumb value while hovered or dragged.

Compared to similar components:

NumberField — Precise typed values with steppers. Prefer NumberField when exact digits matter more than scrubbing a track.
Progress — Read-only indicator of work in progress. Slider is interactive.

App-wide form density (size / rounded) can be set with global.formDefaults — see Default props.

Import

import { Slider } from "@bridge-ui/vue/Components/Slider";

import { Slider } from "@bridge-ui/react/Components/Slider";

Basic usage

Defaults are min={0}, max={100}, and step={1}. In React, use value and onChange for controlled state, or defaultValue for uncontrolled. In Vue, use v-model or default-value.

<script setup lang="ts">
import { ref } from "vue";

import { Slider } from "@bridge-ui/vue/Components/Slider";

const opacity = ref(40);
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider
      label="Volume"
      description="Uncontrolled slider with library defaults."
    />

    <Slider
      :step="5"
      :max="100"
      label="Opacity"
      v-model="opacity"
      description="Controlled value with a 5-unit step."
    />
  </div>
</template>

import { useState } from "react";

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderBasic() {
  const [opacity, setOpacity] = useState(40);

  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider
        label="Volume"
        description="Uncontrolled slider with library defaults."
      />

      <Slider
        step={5}
        max={100}
        value={opacity}
        label="Opacity"
        onChange={setOpacity}
        description="Controlled value with a 5-unit step."
      />
    </div>
  );
}

Range

Set range for two thumbs. The value is a [number, number] tuple and stays sorted when thumbs cross.

<script setup lang="ts">
import { ref } from "vue";

import { Slider } from "@bridge-ui/vue/Components/Slider";

const price = ref<[number, number]>([20, 80]);
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider
      range
      label="Price"
      v-model="price"
      description="Two thumbs stay sorted when they cross."
    />

    <Slider
      range
      :min="0"
      :max="200"
      :step="10"
      label="Budget"
      :default-value="[50, 150]"
      description="Uncontrolled range with a custom max and step."
    />
  </div>
</template>

import { useState } from "react";

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderRange() {
  const [price, setPrice] = useState<[number, number]>([20, 80]);

  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider
        range
        label="Price"
        value={price}
        onChange={setPrice}
        description="Two thumbs stay sorted when they cross."
      />

      <Slider
        range
        min={0}
        max={200}
        step={10}
        label="Budget"
        defaultValue={[50, 150]}
        description="Uncontrolled range with a custom max and step."
      />
    </div>
  );
}

Stops and tooltips

showStops renders marks from stops, or every step between min and max when stops is omitted. Value tooltips are on by default (showTooltip); set it to false to hide them.

<script setup lang="ts">
import { Slider } from "@bridge-ui/vue/Components/Slider";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider
      show-stops
      :step="25"
      label="Step marks"
      :default-value="50"
      description="With showStops and no stops, marks are generated for every step."
    />

    <Slider
      show-stops
      label="Rating"
      :default-value="50"
      :stops="[
        { value: 0, label: 'Low' },
        { value: 50, label: 'Mid' },
        { value: 100, label: 'High' },
      ]"
    />

    <Slider label="Brightness" :default-value="70" :show-tooltip="false" />
  </div>
</template>

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderStops() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider
        showStops
        step={25}
        defaultValue={50}
        label="Step marks"
        description="With showStops and no stops, marks are generated for every step."
      />

      <Slider
        showStops
        label="Rating"
        defaultValue={50}
        stops={[
          { value: 0, label: "Low" },
          { value: 50, label: "Mid" },
          { value: 100, label: "High" },
        ]}
      />

      <Slider defaultValue={70} label="Brightness" showTooltip={false} />
    </div>
  );
}

Colors

Use color for the bar and thumbs. Available colors: primary, secondary, success, info, warning, error, and dark.

<script setup lang="ts">
import { Slider } from "@bridge-ui/vue/Components/Slider";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider color="primary" label="primary" :default-value="60" />
    <Slider color="secondary" label="secondary" :default-value="60" />
    <Slider color="success" label="success" :default-value="60" />
    <Slider color="info" label="info" :default-value="60" />
    <Slider color="warning" label="warning" :default-value="60" />
    <Slider color="error" label="error" :default-value="60" />
    <Slider color="dark" label="dark" :default-value="60" />
  </div>
</template>

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderColors() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider color="primary" label="primary" defaultValue={60} />
      <Slider color="secondary" label="secondary" defaultValue={60} />
      <Slider color="success" label="success" defaultValue={60} />
      <Slider color="info" label="info" defaultValue={60} />
      <Slider color="warning" label="warning" defaultValue={60} />
      <Slider color="error" label="error" defaultValue={60} />
      <Slider color="dark" label="dark" defaultValue={60} />
    </div>
  );
}

Sizes

Control track and thumb size (and chrome typography) with size. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

<script setup lang="ts">
import { Slider } from "@bridge-ui/vue/Components/Slider";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider size="2xs" label="2xs" :default-value="50" />
    <Slider size="xs" label="xs" :default-value="50" />
    <Slider size="sm" label="sm" :default-value="50" />
    <Slider size="md" label="md" :default-value="50" />
    <Slider size="lg" label="lg" :default-value="50" />
    <Slider size="xl" label="xl" :default-value="50" />
    <Slider size="2xl" label="2xl" :default-value="50" />
  </div>
</template>

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider size="2xs" label="2xs" defaultValue={50} />
      <Slider size="xs" label="xs" defaultValue={50} />
      <Slider size="sm" label="sm" defaultValue={50} />
      <Slider size="md" label="md" defaultValue={50} />
      <Slider size="lg" label="lg" defaultValue={50} />
      <Slider size="xl" label="xl" defaultValue={50} />
      <Slider size="2xl" label="2xl" defaultValue={50} />
    </div>
  );
}

Validation

Set error and errorMessage for invalid styling and helper text below the control.

<script setup lang="ts">
import { Slider } from "@bridge-ui/vue/Components/Slider";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-6">
    <Slider
      error
      label="Volume"
      :default-value="20"
      error-message="Choose a value above 30."
    />
  </div>
</template>

import { Slider } from "@bridge-ui/react/Components/Slider";

export default function SliderValidation() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Slider
        error
        label="Volume"
        defaultValue={20}
        errorMessage="Choose a value above 30."
      />
    </div>
  );
}

Accessibility

Thumbs expose slider semantics with aria-orientation="horizontal".
Provide a label (or associate labels via controlId) so assistive technology has an accessible name.
When error is true, invalid styling and the error message are linked through the field chrome.

Anatomy

Slider (root)
├── Header — label, optional corner text, required indicator
├── Control row
│   ├── start slot (optional)
│   ├── Track — bar, optional stops, thumb(s) with tooltip
│   └── end slot (optional)
└── Footer — description or error message

NumberField, Progress, OtpField, Tooltip

API

Prop	Type	Default	Description
v-model	number \| [number, number]	—	Two-way binding for the current value (or range).
default-value	number \| [number, number]	min	Initial value for uncontrolled usage (without v-model).

Prop	Type	Default	Description
value	number \| [number, number]	—	Controlled value. Use with onChange.
defaultValue	number \| [number, number]	min	Initial value for uncontrolled usage.
onChange	(value: number \| [number, number]) => void	—	Called when the value changes.

Slider-specific

Prop	Type	Default	Description
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step increment.
range	boolean	false	Enables two thumbs; value is [low, high].
showStops	boolean	false	Renders stop marks (stops or every step).
stops	SliderStopInput[]	—	Custom marks: number or { value, label? }.
showTooltip	boolean	true	Shows a value tooltip on each thumb while hovered or dragged.
color	SliderColor	"primary"	Color of the bar and thumbs.
size	SliderSize	"md"	Track / thumb size and chrome typography.
rounded	SliderRounded	"full"	Border radius of the track and bar.
classes	SliderClasses	—	Classes for chrome and slider parts.
customProps	SliderCustomProps	—	Extra props for internal parts.
slots	object	—	Chrome slots plus thumb to replace the knob.

Events

Event	Payload	Description
@change	number \| [number, number]	Emitted when the value changes.
@update:modelValue	number \| [number, number]	Emitted for v-model updates.

Prop	Payload	Description
onChange	number \| [number, number]	Called when the value changes.

Field chrome

Prop	Type	Default	Description
label	string	—	Primary label above the control.
description	string	—	Helper text below the control (hidden when invalid).
corner	string	—	Secondary header text.
required	boolean	false	Shows a required asterisk on the label.
disabled	boolean	false	Disables interaction.
readonly	boolean	false	Prevents interaction.
error	boolean	false	Invalid styling.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Hides the error message row.
controlId	string	auto	Id for the control and related labels.
slots	object	—	label, corner, description, errorMessage, start, end, thumb.