Slider

Installation

bunx @prototyperco/cli add slider

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/slider.json

npx shadcn@latest add https://prototyper-ui.com/r/slider.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/slider.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/slider.json

This will add the following files to your project:

components/ui/slider.tsx

Usage

import {
  Slider,
  SliderControl,
  SliderTrack,
  SliderIndicator,
  SliderThumb,
} from "@/components/ui/slider";

<Slider defaultValue={50}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>;

Anatomy

<Slider>
  <SliderOutput />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>

Sub-component	`data-slot`	Purpose	Required
`Slider`	`slider`	Root provider, manages value state	Yes
`SliderControl`	`slider-control`	Touch/pointer interaction area	Yes
`SliderTrack`	`slider-track`	The visible track bar	Yes
`SliderIndicator`	`slider-indicator`	Filled portion of the track	Yes
`SliderThumb`	`slider-thumb`	Draggable thumb handle	Yes
`SliderOutput`	`slider-output`	Displays the current value	No

Examples

Disabled

Step Values

Values

Vertical

Styling

Data Slots

Use data-slot attributes to target specific parts of the slider:

Slot name	Element
`slider`	Root wrapper
`slider-control`	Touch/pointer interaction area
`slider-track`	The visible track bar
`slider-indicator`	Filled portion of the track
`slider-thumb`	Draggable thumb handle
`slider-output`	Current value display

Customization Examples

/* Custom track height */
[data-slot="slider-track"] {
  @apply h-3 rounded-lg;
}

/* Custom indicator color */
[data-slot="slider-indicator"] {
  @apply bg-green-600;
}

{
  /* Override styles via className */
}
<Slider className="w-64" defaultValue={50}>
  <SliderControl>
    <SliderTrack className="h-3">
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>;

API Reference

Slider

Root component that manages value state and layout.

Prop

Type

All Base UI Slider props are forwarded via ...props.

SliderControl

The area that receives touch and pointer events for dragging.

Prop

Type

All Base UI Slider.Control props are forwarded via ...props.

SliderTrack

The visible bar that represents the full range.

Prop

Type

All Base UI Slider.Track props are forwarded via ...props.

SliderIndicator

The filled portion of the track that shows the current value.

Prop

Type

All Base UI Slider.Indicator props are forwarded via ...props.

SliderThumb

The draggable handle that the user interacts with.

Prop

Type

All Base UI Slider.Thumb props are forwarded via ...props.

SliderOutput

Displays the current slider value as text.

Prop

Type

All Base UI Slider.Value props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`ArrowRight`	Increases the value by one step
`ArrowUp`	Increases the value by one step
`ArrowLeft`	Decreases the value by one step
`ArrowDown`	Decreases the value by one step
`PageUp`	Increases the value by one large step
`PageDown`	Decreases the value by one large step
`Home`	Sets the value to the minimum
`End`	Sets the value to the maximum
`Tab`	Moves focus to / away from the thumb

ARIA Attributes

Slider renders with role="group" via Base UI.
SliderThumb renders with role="slider".
aria-valuenow, aria-valuemin, and aria-valuemax are set on the thumb.
aria-orientation is set based on the orientation prop.
aria-disabled is set when the slider is disabled.
SliderOutput is linked to the thumb via aria-describedby for screen reader announcements.
Screen readers announce the current value and range when the thumb receives focus.

Compose

This component is available in @prototyperco/compose.

Catalog Definition

slider.catalog.ts

import { z } from "zod";
import { defineComponent } from "@prototyperco/compose/catalog";

export default defineComponent({
  description:
    "A range slider input for selecting a numeric value within a range",
  props: z.object({
    label: z.string().optional().describe("Label displayed above the slider"),
    min: z.number().optional().describe("Minimum value"),
    max: z.number().optional().describe("Maximum value"),
    step: z.number().optional().describe("Step increment"),
    value: z.number().optional().describe("Current slider value (bindable)"),
    disabled: z.boolean().optional().describe("Whether the slider is disabled"),
  }),
  events: ["change"],
  example: { label: "Volume", min: 0, max: 100, step: 1, value: 50 },
});

Example Spec

{
  "root": "volumeSlider",
  "elements": {
    "volumeSlider": {
      "type": "Slider",
      "props": {
        "label": "Volume",
        "min": 0,
        "max": 100,
        "step": 1,
        "value": 50
      },
      "$bindState": { "path": "/volume", "event": "change" }
    }
  }
}

Learn more in the Compose documentation.

Opacity30

Installation

bunx @prototyperco/cli add slider

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/slider.json

npx shadcn@latest add https://prototyper-ui.com/r/slider.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/slider.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/slider.json

This will add the following files to your project:

components/ui/slider.tsx

Usage

import {
  Slider,
  SliderControl,
  SliderTrack,
  SliderIndicator,
  SliderThumb,
} from "@/components/ui/slider";

<Slider defaultValue={50}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>;

Anatomy

<Slider>
  <SliderOutput />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>

Sub-component	`data-slot`	Purpose	Required
`Slider`	`slider`	Root provider, manages value state	Yes
`SliderControl`	`slider-control`	Touch/pointer interaction area	Yes
`SliderTrack`	`slider-track`	The visible track bar	Yes
`SliderIndicator`	`slider-indicator`	Filled portion of the track	Yes
`SliderThumb`	`slider-thumb`	Draggable thumb handle	Yes
`SliderOutput`	`slider-output`	Displays the current value	No

Examples

Disabled

Cookies to share

Step Values

Amount

Values

Cookies to Buy100

Vertical

Styling

Data Slots

Use data-slot attributes to target specific parts of the slider:

Slot name	Element
`slider`	Root wrapper
`slider-control`	Touch/pointer interaction area
`slider-track`	The visible track bar
`slider-indicator`	Filled portion of the track
`slider-thumb`	Draggable thumb handle
`slider-output`	Current value display

Customization Examples

/* Custom track height */
[data-slot="slider-track"] {
  @apply h-3 rounded-lg;
}

/* Custom indicator color */
[data-slot="slider-indicator"] {
  @apply bg-green-600;
}

{
  /* Override styles via className */
}
<Slider className="w-64" defaultValue={50}>
  <SliderControl>
    <SliderTrack className="h-3">
      <SliderIndicator />
      <SliderThumb />
    </SliderTrack>
  </SliderControl>
</Slider>;

API Reference

Slider

Root component that manages value state and layout.

Prop

Type

All Base UI Slider props are forwarded via ...props.

SliderControl

The area that receives touch and pointer events for dragging.

Prop

Type

All Base UI Slider.Control props are forwarded via ...props.

SliderTrack

The visible bar that represents the full range.

Prop

Type

All Base UI Slider.Track props are forwarded via ...props.

SliderIndicator

The filled portion of the track that shows the current value.

Prop

Type

All Base UI Slider.Indicator props are forwarded via ...props.

SliderThumb

The draggable handle that the user interacts with.

Prop

Type

All Base UI Slider.Thumb props are forwarded via ...props.

SliderOutput

Displays the current slider value as text.

Prop

Type

All Base UI Slider.Value props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`ArrowRight`	Increases the value by one step
`ArrowUp`	Increases the value by one step
`ArrowLeft`	Decreases the value by one step
`ArrowDown`	Decreases the value by one step
`PageUp`	Increases the value by one large step
`PageDown`	Decreases the value by one large step
`Home`	Sets the value to the minimum
`End`	Sets the value to the maximum
`Tab`	Moves focus to / away from the thumb

ARIA Attributes

Slider renders with role="group" via Base UI.
SliderThumb renders with role="slider".
aria-valuenow, aria-valuemin, and aria-valuemax are set on the thumb.
aria-orientation is set based on the orientation prop.
aria-disabled is set when the slider is disabled.
SliderOutput is linked to the thumb via aria-describedby for screen reader announcements.
Screen readers announce the current value and range when the thumb receives focus.

Compose

This component is available in @prototyperco/compose.

Catalog Definition

slider.catalog.ts

import { z } from "zod";
import { defineComponent } from "@prototyperco/compose/catalog";

export default defineComponent({
  description:
    "A range slider input for selecting a numeric value within a range",
  props: z.object({
    label: z.string().optional().describe("Label displayed above the slider"),
    min: z.number().optional().describe("Minimum value"),
    max: z.number().optional().describe("Maximum value"),
    step: z.number().optional().describe("Step increment"),
    value: z.number().optional().describe("Current slider value (bindable)"),
    disabled: z.boolean().optional().describe("Whether the slider is disabled"),
  }),
  events: ["change"],
  example: { label: "Volume", min: 0, max: 100, step: 1, value: 50 },
});

Example Spec

{
  "root": "volumeSlider",
  "elements": {
    "volumeSlider": {
      "type": "Slider",
      "props": {
        "label": "Volume",
        "min": 0,
        "max": 100,
        "step": 1,
        "value": 50
      },
      "$bindState": { "path": "/volume", "event": "change" }
    }
  }
}

Learn more in the Compose documentation.

Slider

On this page

Slider

On this page