Components

Component

Slider

Single or range value selector within a numeric interval.

ReactReact Native8 props
PreviewReact

Imports

import { Slider } from "@hozorica/hods-react/slider";
import { Slider } from "@hozorica/hods-react-native/slider";

Props

PropTypeDescription
min / max *numberNumeric slider bounds.
values / defaultValuesnumber[]Controlled and uncontrolled thumb values.
onValuesChange / onValuesCommit(values) => voidChange and commit callbacks.
step / allowedValuesnumber / number[]Value snapping rules.
markers / ticksArrayVisual scale marks.
label / description / errorMessageReactNodeField text around the slider.
disabled / readOnly / invalidbooleanInteraction and validation states.
getAriaLabel / getAriaValuetextfunctionAccessible names and values for thumbs.

Platform Support

React

Range-input based slider with single/range values, ticks, markers, labels, errors, allowed values, and controlled state.

React Native

Static adjustable slider surface for RN parity; gesture dragging is intentionally deferred.

Usage

<Slider min={0} max={100} defaultValues={[50]} getAriaLabel={() => "값"} />

Notes

  • Use two values for range selection.
  • Markers are aria-hidden; use getAriaValuetext for semantic value text.