🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Slider

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

Sliders provide an intuitive way for users to select numeric values by dragging a handle along a track. They're particularly effective when the precise value is less important than the relative position within a range, such as volume controls, brightness settings, or filter ranges. Sliders support both single values and range selections with two handles, making them versatile for different selection scenarios. They provide immediate visual feedback and are more engaging than text inputs for certain types of numeric selection.

Use sliders when users need to select from a continuous range of values where the exact number is less critical than the general magnitude. They work well for settings and controls where visual adjustment is more intuitive than typing. For precise numeric input or when exact values matter, consider using number inputs instead. Sliders should always include visible value indicators or labels to help users understand the current selection.

Example

Installation


npm install @strongtie/design-system

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

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

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

slider

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Skeleton Switch

On This Page

Example Installation Props Examples Disabled Styling Classes Accessibility

Contribute