Slider

Slider is tuned for settings, filters, and range controls where direct manipulation should feel precise without drawing too much visual weight.

#Default usage

<Slider aria-label="Preview density" defaultValue={[56]} max={100} step={1} />

#Import

import { Slider } from "@froggdesign/enter-ui-react";

#Patterns

<Slider aria-label="Price range" defaultValue={[24, 78]} max={100} step={1} />

#Accessibility

Slider uses Radix slider semantics, keyboard interaction, disabled state, and focus-visible styling. Always provide a label.

#API

• Supports Radix slider root props such as value, defaultValue, min, max, step, and disabled.
• Renders one thumb per entry in value or defaultValue.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.