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" />
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

<template>
  <Slider :defaultValue="25" aria-label="Volume" />
</template>

Installation

pnpx starwind@latest add slider --framework astro

npx starwind@latest add slider --framework astro

yarn dlx starwind@latest add slider --framework astro

pnpx starwind@latest add slider --framework react

npx starwind@latest add slider --framework react

yarn dlx starwind@latest add slider --framework react

pnpx starwind@latest add slider --framework vue

npx starwind@latest add slider --framework vue

yarn dlx starwind@latest add slider --framework vue

Usage

---
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" />
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

<template>
  <Slider :defaultValue="25" aria-label="Volume" />
</template>

Behavior

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" />
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

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

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" />
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

<template>
  <Slider :defaultValue="50" :step="10" aria-label="Rating" />
</template>

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>
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

<template>
  <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>
</template>

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" />
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

<template>
  <Slider :defaultValue="40" disabled aria-label="Disabled slider" />
</template>

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>
    </>
  );
}

<script setup lang="ts">
import { Slider } from "@/components/starwind/slider";
</script>

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

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 id="volume-label">Volume</Label>
    <Slider defaultValue={50} name="volume" aria-labelledby="volume-label" />
  </div>
  <div class="space-y-2">
    <Label id="price-range-label">Price Range</Label>
    <Slider defaultValue={[20, 80]} name="price" aria-labelledby="price-range-label" />
  </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 id="volume-label">Volume</Label>
        <Slider defaultValue={50} name="volume" aria-labelledby="volume-label" />
      </div>
      <div className="space-y-2">
        <Label id="price-range-label">Price Range</Label>
        <Slider defaultValue={[20, 80]} name="price" aria-labelledby="price-range-label" />
      </div>
      <Button type="submit">Submit</Button>
    </form>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
import { Label } from "@/components/starwind/label";
import { Slider } from "@/components/starwind/slider";
function submit(event: Event) {
  const form = event.currentTarget as HTMLFormElement;
  const data = new FormData(form);
  console.log(Object.fromEntries(data));
}
</script>

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

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

View version history v2.0.1 4 releases

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