Slider

An input where the user selects a value from within a given range.

Installation


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

Usage

import { Slider, SliderValue } from "@/components/ui/slider"

<Slider />

Examples

For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Slider field.

With Label and Value

Opacity50

import { Label } from "@/components/ui/label"
import { Slider, SliderValue } from "@/components/ui/slider"

export function SliderWithLabelValue() {
  return (
    <Slider defaultValue={50}>
      <div className="mb-2 flex items-center justify-between gap-1">
        <Label className="text-sm font-medium">Opacity</Label>
        <SliderValue />
      </div>
    </Slider>
  )
}

Range Slider

Vertical

Form Integration

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Slider, SliderValue } from "@/components/ui/slider"

export function SliderForm() {
  const [loading, setLoading] = React.useState<boolean>(false)
  const [value, setValue] = React.useState<number | readonly number[]>([25, 75])

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    setLoading(true)
    await new Promise((r) => setTimeout(r, 800))
    setLoading(false)
    const volumes = formData.getAll("volume")
    alert(`Volume: ${volumes.join(", ")}`)
  }

  return (
    <Form onSubmit={onSubmit}>
      <Field name="volume" className="items-stretch gap-3">
        <Slider value={value} onValueChange={setValue} disabled={loading}>
          <div className="mb-2 flex items-center justify-between gap-1">
            <FieldLabel>Volume</FieldLabel>
            <SliderValue />
          </div>
        </Slider>
        <FieldDescription>Choose a value between 0 and 100</FieldDescription>
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}

Comparing with Radix / shadcn

If you're already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss.com ui quickly.

Quick Checklist

If you used asChild on parts, switch to the render prop

Sheet Switch

On This Page

Installation Usage Examples With Label and Value Range Slider Vertical Form Integration Comparing with Radix / shadcn Quick Checklist