Slider

Root Props

Also accepts all <div> attributes.

Child Parts

• SliderTrack: the rail, a div.
• SliderRange: the filled part of the rail, a div inside SliderTrack.
• SliderThumb: one handle, a div with display: contents that groups its input and indicator.
  • index: its entry of the root value, 0 by default
  • sets the position variables; CSS variables in its style reach both parts
• SliderThumbInput: the native <input type="range"> inside SliderThumb. All its props (name, disabled, list, aria-*, onChange, ref…) go to the input; min, max, step and value come from the root.
• SliderThumbIndicator: the visual handle inside SliderThumb, a div with any content. It is aria-hidden and lets the pointer through to the input.

SliderTrack

Also accepts all <div> attributes.

SliderRange

Also accepts all <div> attributes.

SliderThumb

Also accepts all <div> attributes.

SliderThumbInput

Also accepts all <input> attributes.

SliderThumbIndicator

Also accepts all <div> attributes.

Hooks

Advanced hooks for custom parts inside Slider. Use them only when the exported parts are not enough.

useSliderContext

Root state, available anywhere inside Slider:

useSliderThumbContext

The surrounding SliderThumb:

A value bubble that also works without value on the root:

import {
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
  useSliderContext,
  useSliderThumbContext,
} from '@vega-ui/react';

Types

• SliderProps
• SliderTrackProps
• SliderRangeProps
• SliderThumbProps
• SliderThumbInputProps
• SliderThumbIndicatorProps
• SliderSize
• SliderVariant
• SliderOrientation

State Model

Slider owns the values of its thumbs. The shape follows value or defaultValue: a number for one thumb, an array with one entry per SliderThumb by its index for several. onChangeValue receives the same shape.

• Uncontrolled: defaultValue sets the start; a reset of the form of the thumbs restores it, including a form linked with the form attribute. Without value and defaultValue the slider has one thumb in the middle of the range and reports numbers, like <input type="range">.
• Controlled: value with onChangeValue. A change the parent does not apply is rolled back, like a controlled input.
• Each thumb is a controlled native input: pointer, keyboard, focus, forms and assistive technologies come from the browser, and onChange on a thumb fires for every change.
• Values off the step grid or outside min/max are snapped like <input type="range"> does, without calling onChangeValue.
• The shape is fixed by the first value: switching between a number and an array on the fly is not supported.

import { useState } from 'react';
import {
  Label,
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
} from '@vega-ui/react';

import { useState } from 'react';
import {
  Fieldset,
  FieldsetLegend,
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
} from '@vega-ui/react';

Thumb Constraints

• Each thumb input gets its own native min and max: the neighbours' values, minStepsBetweenThumbs * step away, or the root min and max at the ends. The browser keeps the thumb between them for dragging and keys, and aria-valuemin/aria-valuemax announce the real limits.
• With step='any' there is no step to count, so minStepsBetweenThumbs has no effect and thumbs may meet; use a small numeric step such as 0.01 to keep a gap.
• Values given out of order are sorted and kept minStepsBetweenThumbs steps apart, without calling onChangeValue, so the thumbs, the inputs and the submitted values agree.

Behavior

• Like <input type="range">, steps count from min and the value stays within min and the last step that fits in max.
• The inputs of neighbouring thumbs are cut at the midpoint between their values, so a click on the track moves the nearest thumb natively. Stacked thumbs are split at their centre: the left half moves the lower one, the right half the upper one.
• A disabled thumb keeps its half of the track: a click there does nothing.
• On touch screens a horizontal slider leaves gestures to the browser like <input type="range">; a vertical one sets touch-action: pan-x pinch-zoom, so a vertical swipe moves the thumb instead of scrolling the page.
• A <datalist> connected through list snaps the pointer natively; its tick marks are not visible, draw your own.