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>

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

<div class="w-full max-w-sm">
  <Slider defaultValue={25} aria-label="Volume" />
</div>

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

pnpx starwind@latest add slider --framework svelte

npx starwind@latest add slider --framework svelte

yarn dlx starwind@latest add slider --framework svelte

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>

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

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

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>

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

<div class="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 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>

<script 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>

<form
  onsubmit={(event) => {
    event.preventDefault();
    submit(event);
  }}
  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>

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.1.0 6 releases

v2.1.0

In Svelte, a defined value that you pass when Slider mounts now stays under your control, as in React and Vue. To change it, use bind: or update your state in the change callback. A form reset keeps it. If you pass undefined at mount, Slider keeps its own state.
Fixed a bound Slider in Svelte that reset to 0.

v2.0.2

Reduced the JavaScript loaded by Slider when it is used without Field.

v2.0.1

In React, you can cancel a change before it applies. The component then keeps its previous state, and it shows only the changes that apply.

v2.0.0

Slider now gets its behavior from Starwind Runtime. Runtime handles the values, the keyboard, dragging, and the native form value.
See the Slider Primitive for the unstyled parts and the behavior API.

v1.0.2

The Tailwind variants now live in their own variants.ts file in the component folder.

v1.0.0

Initial release with starwind v1.13.0