Slider

Single-thumb Radix Slider for numeric ranges (zoom, filters). Used by @sumx/sumx-editor image crop.

Interactive demo

Zoom: 1.5

Interactive

Same control used in the SumX Editor image crop dialog.

<Slider
  min={1}
  max={4}
  step={0.1}
  value={[zoom]}
  onValueChange={([v]) => setZoom(v ?? 1)}
/>

Import


import { Slider } from '@sumx/ui';

Usage


const [zoom, setZoom] = useState(1);
 
<Slider
  min={1}
  max={4}
  step={0.02}
  value={[zoom]}
  onValueChange={([v]) => setZoom(v ?? 1)}
  className="w-full"
/>

Props

React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>:

Prop	Description
`value`	`number[]` — one thumb
`defaultValue`	Uncontrolled initial
`min`, `max`, `step`	Range
`onValueChange`	`(value: number[]) => void`
`disabled`	Disable interaction

Styling

Track: bg-secondary
Range: bg-primary
Thumb: border-primary, focus ring

Portal note

Portal src/shared/components/ui/slider.tsx supports isRangeSlider for dual-thumb ERP filters. Kit Slider is single-thumb only.

SumX Editor — crop hook