On this page

Slider

---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={25} aria-label="Volume" />

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <Slider defaultValue={25} aria-label="Volume" />
    </>
  );
}

Installation

pnpx starwind@latest add slider

npx starwind@latest add slider

yarn dlx starwind@latest add slider

Usage

General Notes

The Slider component provides an accessible way to select values within a range. It supports:

Single value selection: Default mode with one thumb
Range selection: Pass an array to defaultValue for two thumbs
Keyboard navigation: Arrow keys, Page Up/Down, Home/End
Form integration: Works with native form submission via hidden inputs

Range Slider

Pass an array of two values to create a range slider with two thumbs.

---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={[25, 75]} aria-label="Price range" />

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <Slider defaultValue={[25, 75]} aria-label="Price range" />
    </>
  );
}

With Step

Use the step prop to control the increment value.

---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={50} step={10} aria-label="Rating" />

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <Slider defaultValue={50} step={10} aria-label="Rating" />
    </>
  );
}

Variants

The slider supports multiple color variants.

---
import { Slider } from "@/components/starwind/slider";
---

<div class="flex flex-col gap-4">
  <Slider defaultValue={50} variant="default" aria-label="Default variant" />
  <Slider defaultValue={50} variant="primary" aria-label="Primary variant" />
  <Slider defaultValue={50} variant="secondary" aria-label="Secondary variant" />
  <Slider defaultValue={50} variant="info" aria-label="Info variant" />
  <Slider defaultValue={50} variant="success" aria-label="Success variant" />
  <Slider defaultValue={50} variant="warning" aria-label="Warning variant" />
  <Slider defaultValue={50} variant="error" aria-label="Error variant" />
</div>

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <div className="flex flex-col gap-4">
        <Slider defaultValue={50} variant="default" aria-label="Default variant" />
        <Slider defaultValue={50} variant="primary" aria-label="Primary variant" />
        <Slider defaultValue={50} variant="secondary" aria-label="Secondary variant" />
        <Slider defaultValue={50} variant="info" aria-label="Info variant" />
        <Slider defaultValue={50} variant="success" aria-label="Success variant" />
        <Slider defaultValue={50} variant="warning" aria-label="Warning variant" />
        <Slider defaultValue={50} variant="error" aria-label="Error variant" />
      </div>
    </>
  );
}

Disabled

---
import { Slider } from "@/components/starwind/slider";
---

<Slider defaultValue={40} disabled aria-label="Disabled slider" />

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <Slider defaultValue={40} disabled aria-label="Disabled slider" />
    </>
  );
}

Vertical Orientation

Set orientation="vertical" for a vertical slider. Make sure to provide a container with a defined height.

---
import { Slider } from "@/components/starwind/slider";
---

<div class="h-32">
  <Slider defaultValue={60} orientation="vertical" aria-label="Vertical slider" />
</div>

import { Slider } from "@/components/starwind/slider";

export function Example() {
  return (
    <>
      <div className="h-32">
        <Slider defaultValue={60} orientation="vertical" aria-label="Vertical slider" />
      </div>
    </>
  );
}

Form Submission

The slider includes hidden <input type="range"> elements for native form submission. For range sliders, the inputs are named with array notation (e.g., price[0], price[1]).

Submit the form to see values

---
import { Button } from "@/components/starwind/button";
import { Label } from "@/components/starwind/label";
import { Slider } from "@/components/starwind/slider";
---

<form id="slider-form" class="space-y-4">
  <div class="space-y-2">
    <Label for="volume">Volume</Label>
    <Slider defaultValue={50} name="volume" aria-label="Volume" />
  </div>
  <div class="space-y-2">
    <Label for="price-range">Price Range</Label>
    <Slider defaultValue={[20, 80]} name="price" aria-label="Price range" />
  </div>
  <Button type="submit">Submit</Button>
</form>

<script>
  const form = document.getElementById("slider-form") as HTMLFormElement;
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  });
</script>

import type { FormEvent } from "react";
import { Button } from "@/components/starwind/button";
import { Label } from "@/components/starwind/label";
import { Slider } from "@/components/starwind/slider";

export function Example() {
  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    console.log(Object.fromEntries(new FormData(event.currentTarget).entries()));
  }

  return (
    <form className="space-y-4" onSubmit={handleSubmit}>
      <div className="space-y-2">
        <Label htmlFor="volume">Volume</Label>
        <Slider defaultValue={50} name="volume" aria-label="Volume" />
      </div>
      <div className="space-y-2">
        <Label htmlFor="price-range">Price Range</Label>
        <Slider defaultValue={[20, 80]} name="price" aria-label="Price range" />
      </div>
      <Button type="submit">Submit</Button>
    </form>
  );
}

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Slider

Inherits div attributes. Omits `defaultValue`, `onChange`, and `value`.

Contains the following additional props:

Prop Type Default

defaultValue number | number[] 0

Description: Sets the initial value when the component is uncontrolled.
Classification: Primitive override
Type imports: React import type { SliderValue } from "@starwind-ui/react";
Primitive prop: slider.Root.defaultValue

orientation "horizontal" | "vertical" "horizontal"

Description: Selects the horizontal or vertical layout direction.
Classification: Primitive override
Primitive prop: slider.Root.orientation

value number | number[] —

Description: Controls or identifies the component value.
Classification: Primitive override
Type imports: React import type { SliderValue } from "@starwind-ui/react";
Primitive prop: slider.Root.value

Description: Selects the component's visual variant.
Classification: Styled variant

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Slider.

Primitive API

Slider Primitive

Runtime API

Slider primitive: createSlider from @starwind-ui/runtime/slider

Changelog

v2.0.1

Updated React Runtime state synchronization so canceled proposals stay uncommitted and accepted changes remain aligned.

v2.0.0

Rebuilt Slider on Starwind Runtime for values, keyboard interaction, dragging, and native form participation.
See the Slider Primitive for the underlying unstyled anatomy and behavior API.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.13.0