Slider

since 1.0

Slider is an input component that allows users to select a value from a continuous range.

Example

Install

import { Slider } from "@strongtie/design-system/slider"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

Examples

Disabled

Disabled Slider

"use client"

import { Label } from "@strongtie/design-system/label"
import { Slider } from "@strongtie/design-system/slider"

export function SliderDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <Label htmlFor="disabled-slider">Disabled Slider</Label>
      <Slider
        id="disabled-slider"
        defaultValue={[50]}
        max={100}
        step={1}
        disabled
        className="w-[300px]"
      />
    </div>
  )
}

Skeleton Sonner

On This Page

Example Install Props Examples Disabled