Fluid Slider

Use Fluid Slider for a numeric value that benefits from direct adjustment. People can drag the indicator or select a position on the track, while the label and current value stay visible.

Preview

Reduce motion:Off

Tune:Off

Inspect

Frequency

Installation

Base UI Motion

npx shadcn@latest add @sona-ui/fluid-slider

Basic usage

volume-slider.tsx

import FluidSlider from "@/components/ui/fluid-slider/fluid-slider";
 
export function VolumeSlider() {
return <FluidSlider label="Volume" defaultValue={50} />;
}

Examples

Use value and onValueChange for controlled state. Reference marks and formatted values help when the scale has meaningful thresholds.

Usage


export default function FluidSliderDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-5">
      <FluidSlider
        label="Frequency"
        defaultValue={15}
        formatValue={(value) => `${value}%`}
      />
      <FluidSlider
        label="Resonance"
        defaultValue={6}
        max={10}
        marks={[2, 4, 6, 8]}
      />
    </div>
  );
}

API

Property	Type	Default	Description
`label`	`ReactNode`	`required`	Visible label associated with the slider.
`value`	`number`	`undefined`	Controlled slider value.
`defaultValue`	`number`	`50`	Initial value for uncontrolled usage.
`onValueChange`	`( value: number, details: Slider.Root.ChangeEventDetails, ) => void`	`undefined`	Called continuously while the value changes.
`onValueCommitted`	`( value: number, details: Slider.Root.CommitEventDetails, ) => void`	`undefined`	Called when a pointer or keyboard interaction commits.
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum allowed value.
`step`	`number`	`1`	Smallest value increment.
`largeStep`	`number`	`10`	Increment used by Page Up, Page Down, and modified arrow keys.
`marks`	`number[]`	`[]`	Numeric positions rendered as quiet reference marks.
`formatValue`	`(value: number) => string`	`undefined`	Formats the visible and accessible value text.
`format`	`Intl.NumberFormatOptions`	`undefined`	Intl options used when no custom formatter is supplied.
`locale`	`Intl.LocalesArgument`	`undefined`	Locale used by the default number formatter.
`showValue`	`boolean`	`true`	Whether the trailing formatted value is visible.
`editableValue`	`boolean`	`true`	Whether the visible value can be edited as an exact number.
`showHandle`	`boolean`	`true`	Whether the active boundary grip is visible.
`disabled`	`boolean`	`false`	Whether the slider ignores user interaction.
`name`	`string`	`undefined`	Name submitted with the slider's hidden range input.
`form`	`string`	`undefined`	ID of the form that owns the slider input.
`ariaLabel`	`string`	`undefined`	Accessible name used instead of the visible label.
`className`	`string`	`undefined`	Additional classes for the slider root.
`trackClassName`	`string`	`undefined`	Additional classes for the track surface.
`surfaceClassName`	`string`	`undefined`	Additional classes for the filled surface.
`labelClassName`	`string`	`undefined`	Additional classes for the fixed label.
`valueClassName`	`string`	`undefined`	Additional classes for the trailing value.
`handleClassName`	`string`	`undefined`	Additional classes for the boundary grip.

Accessibility

Fluid Slider uses Base UI range semantics, keyboard controls, and form integration. The semantic value stays within its constraints even when the visual edge response adds resistance.

Styling

The fluid-slider token set lets you adapt surfaces, labels, and the boundary indicator to your theme. Reduced-motion and keyboard updates remain immediate.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI