Slider

import { Slider } from '@yarcl/react';

Volume

40%

Price

$200 to $800

<Field label="Volume">
  <Slider value={volume} onValueChange={setVolume} />
</Field>

<Field label="Price">
  <Slider.Range defaultValue={[200, 800]} min={0} max={1000} step={50} formatValue={(v) => `$${v}`} />
</Field>

<Field label="Rubric score">
  <Slider
    min={0}
    max={30}
    defaultValue={22}
    marks={[{ value: 0, label: '0' }, { value: 20 }, { value: 26 }, { value: 30, label: '30' }]}
    segments={[
      { from: 0, to: 20, color: 'danger', label: 'Developing' },
      { from: 20, to: 26, color: 'warning', label: 'Proficient' },
      { from: 26, to: 30, color: 'success', label: 'Exceptional' },
    ]}
  />
</Field>

Slider.Range provides an explicitly range-only API. You can also pass a [start, end] pair directly to Slider. The type of onValueChange follows the value: a number, or a pair. Values snap to step, counted from min, and the two thumbs of a range can’t cross.

Use marks for track ticks and optional labels. Use segments for colored intervals and labels. Segment colors are keys from your colors config. Positions outside min and max are clipped. A labelled segment is included in the thumb’s accessible value text unless you provide formatValue.

Tokens

• size scales the thumb and the track from the size’s iconSize.
• radius rounds the thumb and the track.
• color fills the selected part of the track and the thumb border. Inside a Field with an error, it switches to defaults.errorColor.
• Set per-component defaults with components.Slider (size, radius, color).

Accessibility

• Each thumb has role="slider" with aria-valuenow, aria-valuemin and aria-valuemax. In a range, each thumb’s bounds are the other thumb’s value.
• Arrow keys move by step, PageUp and PageDown by largeStep, Home and End to the ends.
• Inside a Field, thumbs are labelled by the field label and described by its helper text and error. Outside one, pass aria-label or aria-labelledby.
• Range thumbs add “Minimum” and “Maximum” to the label; change them with thumbLabels.
• formatValue sets aria-valuetext, so screen readers announce “$200” instead of “200”.
• name renders a hidden input per thumb, so the value submits with a form.

Props

Accepts every native <div> attribute except color, defaultValue, onChange and children.

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
defaultValue	V	min	Initial value when uncontrolled. Pass a [start, end] pair for a range with two thumbs.
disabled	boolean	false	Prevents interaction and dims the slider.
formatValue	(value: number) => string		Formats a value for screen readers (aria-valuetext).
largeStep	number	a tenth of the range, rounded to a whole number of steps	Jump for PageUp and PageDown.
marks	readonly SliderMark[]		Positions to show as ticks, with optional labels below the track.
max	number	100	Highest value.
min	number	0	Lowest value.
name	string		Form field name. Renders a hidden input per thumb with its value.
onValueChange	(value: V) => void		Called with the new value while the user drags or presses a key.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
segments	readonly SliderSegment[]		Colored intervals with optional labels below the track. Values are clamped to min and max.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
step	number	1	Interval between values. Values snap to multiples of it, counted from min.
thumbLabels	readonly …	[config.labels.sliderMinimum, config.labels.sliderMaximum]	Names of the two thumbs of a range, added to the slider's label.
value	V		Controlled value. Pass a [start, end] pair for a range with two thumbs.