Leaf UI
  • English

      • Slider

      Choose a number or range by sliding.

      Basic usage

      Live previewBasic usage

      Current value: 35

      basic.tsx
      import { Slider, type SliderMark } from '@sudden3/leaf-ui';
import { useState } from 'react';

const marks: SliderMark[] = [
  { value: 0, label: 'Low' },
  { value: 50, label: 'Mid' },
  { value: 100, label: 'High' },
];
export function SliderBasic() {
  const [value, setValue] = useState(35);
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Slider aria-label="Volume" value={value} onChange={setValue} marks={marks} />
      <p className="leaf-demo-note">Current value: {value}</p>
      <Slider aria-label="Budget" range defaultValue={[20, 70]} marks={marks} />
      <Slider aria-label="Disabled value" defaultValue={45} disabled />
      <Slider aria-label="Vertical value" vertical defaultValue={60} />
    </div>
  );
}

      Slider API

      PropertyTypeDefaultDescription
      value / defaultValuenumber | readonly [number, number]0 / [min, max]Controlled / initial value; tuple for ranges
      onChange(value: number) => void | (value: [number, number]) => void—Value changes; callback follows range mode
      rangebooleanfalseRange selection
      min / max / stepnumber0 / 100 / 1Bounds and step
      marksreadonly SliderMark[][]Marks
      vertical / showValuebooleanfalse / trueVertical layout / show value on hover or focus
      onChangeComplete(value: number | readonly [number, number]) => void—After a drag or keyboard change completes
      disabled / readOnlybooleanfalseDisabled / read only
      name / formstring—Field name / form ID

      SliderMark

      PropertyTypeDefaultDescription
      valuenumberRequiredMark position
      labelReactNodevalueMark label

      Types

      Import the exported types when defining props or building item lists.

      import type { SliderProps, SliderMark } from '@sudden3/leaf-ui';

      Usage notes

      Arrows change the value, Home / End go to bounds, and Shift + arrows or PageUp / PageDown move ten steps. Range thumbs do not cross. Range mode submits two values under the same name; read them with FormData.getAll. Native form reset is supported.