Slider

Single or range slider. The value shape decides the mode: a number gives one thumb and a [from, to] tuple gives two. Each thumb is a role="slider" with arrow, Page and Home/End keys.

Import

import { Slider } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/slider.

Usage

<Slider
  min={0}
  max={100}
  step={5}
  defaultValue={40}
  aria-label="Descuento"
  showValue
/>

Props

Prop	Type	Default	Description
value	number | RangeValue
defaultValue	number | RangeValue
onValueChange	((value: number) => void) | ((value: RangeValue) => void)
min	number
max	number
step	number
pageStep	number		Step used by PageUp/PageDown. Defaults to 10 steps.
minGap	number		Minimum distance between the two thumbs of a range.
disabled	boolean
marks	SliderMark[]		Ticks on the track; a label renders as a caption under it.
showValue	boolean		Shows the current value above each thumb; it is emphasized while dragged or focused.
formatValue	((value: number) => string)
aria-label	string		Accessible name; thumbs of a range get “mínimo”/“máximo” appended.
aria-labelledby	string
name	string		Form field name; a range submits ${name}-min and ${name}-max.
className	string

* marks a required prop.

Storybook stories

• Default
• With Marks
• Range
• Disabled
• Controlled Value
• Narrow
• Brutal Preset

Source

packages/ui/src/forms/slider/slider.tsx