Slider

Single-value slider built from a native <input type="range">, sharing its track and thumb styling with RangeSlider. Fully controlled. With editable the exact value can also be typed into a number field beside the track; typed values are snapped to the step grid and clamped to [min, max].

Source

Import

import { Slider } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Editable · Open in Storybook

Stepped Editable · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
ariaLabel	string	Value	Accessible name of the slider thumb. The number field is named `Edit <lowercased label>`.
className	string	—	—
editable	boolean	false	Shows a number field on the same row as the track for exact keyboard entry.
fillClassName	string	—	—
max*	number	—	—
min*	number	—	—
onChange*	(…) => void	—	—
step	number	1	—
thumbClassName	string	—	—
trackClassName	string	—	—
value*	number	—	—