Inputs

Slider

A single or range value input with pointer, touch, and keyboard interaction.

SliderView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Slider } from "innate-ui";
import classes from "../docs.module.css";

export function SliderDemo() {
  const rating = Cell.source(5);
  const volume = Cell.source(40);
  const range = Cell.source<ReadonlyArray<number>>([25, 75]);
  const ratingIndicator = Cell.derived(() => `${rating.get()}/10`);

  return (
    <div class={classes.sliderDemo}>
      <Slider
        value={rating}
        onChange={(value) => rating.set(value)}
        min={1}
        max={10}
        step={1}
        marks
        valueIndicator="always"
        ariaLabel="Rating"
      >
        <Slider.ValueIndicator>
          <strong>{ratingIndicator}</strong>
        </Slider.ValueIndicator>
      </Slider>
      <Slider value={volume} onChange={(value) => volume.set(value)} ariaLabel="Volume" />
      <Slider
        value={range}
        onChange={(value) => range.set(value)}
        ariaLabel={["Minimum price", "Maximum price"]}
      />
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

SliderProps

Prop	Type	Default
`children` Optional `Slider.ValueIndicator` overrides.	`JSX.Children`	`—`
`value`required Current slider value, or one value per thumb for a range slider.	`JSX.ValueOrCell<Value>`	`—`
`onChange` Called when dragging, clicking the track, or keyboard input changes the value.	`(value: Value) => void`	`—`
`min` Minimum allowed value.	`JSX.ValueOrCell<number>`	`0`
`max` Maximum allowed value.	`JSX.ValueOrCell<number>`	`100`
`step` Value increment used for snapping and keyboard changes.	`JSX.ValueOrCell<number>`	`1`
`marks` Whether to render step marks on the track.	`JSX.ValueOrCell<boolean>`	`false`
`valueIndicator` When thumb value indicators are shown.	`JSX.ValueOrCell<SliderValueIndicator>`	`"interaction"`
`orientation` Slider orientation.	`JSX.ValueOrCell<SliderOrientation>`	`"horizontal"`
`disabled` Whether the slider is disabled.	`JSX.ValueOrCell<boolean>`	`false`
`invalid` Whether the slider is in an invalid state. Inherits from `Field`.	`JSX.ValueOrCell<boolean>`	`false`
`ariaLabel` Accessible label, or one label per thumb for a range slider. Optional when `Field.Label` provides the label.	`JSX.ValueOrCell<string \| ReadonlyArray<string>>`	`—`
`ariaDescribedBy` Ids of elements that describe the slider.	`JSX.ValueOrCell<string \| undefined>`	`—`
`ariaLabelledBy` Ids of elements that label the slider.	`JSX.ValueOrCell<string \| undefined>`	`—`
`formatValue` Formats a thumb value for its displayed and accessible value text.	`(value: number, index: number) => string`	`—`
`onPointerDown` Pointer-down handler called before slider interaction begins.	`EventHandlerProp<HTMLDivElement, PointerEvent>`	`—`
`onPointerMove` Pointer-move handler called before an active drag is updated.	`EventHandlerProp<HTMLDivElement, PointerEvent>`	`—`
`onPointerUp` Pointer-up handler called before an active drag ends.	`EventHandlerProp<HTMLDivElement, PointerEvent>`	`—`
`onPointerCancel` Pointer-cancel handler called before an active drag is cancelled.	`EventHandlerProp<HTMLDivElement, PointerEvent>`	`—`

SliderValueIndicatorProps

Prop	Type	Default
`index` Thumb index whose value indicator is replaced.	`number`	`0`
`children`required Replacement content for that thumb's value indicator.	`JSX.Children`	`—`

Inspect the typed source →