Slider

Pick a number — or a range of numbers — by dragging along a track. Built on base-ui Slider — pointer dragging, keyboard stepping, and ARIA wiring come for free.

Slider is a single component that renders the whole control (track, filled range, and thumbs). Pass a number for a single value; pass an array of numbers for a multi-thumb range.

Basic

Drive it with value + onValueChange and render the current value alongside. onValueChange hands you the new number directly.

Package weight12 lb

import { Slider } from "@vesyl/ui-next";
import { useState } from "react";

export default function SliderBasic() {
  const [weight, setWeight] = useState(12);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">Package weight</span>
        <span className="text-muted-foreground tabular-nums">{weight} lb</span>
      </div>
      <Slider
        value={weight}
        onValueChange={(value) => setWeight(typeof value === "number" ? value : value[0])}
        min={0}
        max={50}
      />
    </div>
  );
}

Stepped

min, max, and step define the scale and snap increment — the slider only lands on multiples of step measured from min. Use it when intermediate values are meaningless, like a box length picked in 6-inch increments.

Max box length24 in

Snaps to 6-inch increments (6–48 in).

import { Slider } from "@vesyl/ui-next";
import { useState } from "react";

export default function SliderStepped() {
  const [maxLength, setMaxLength] = useState(24);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">Max box length</span>
        <span className="text-muted-foreground tabular-nums">{maxLength} in</span>
      </div>
      <Slider
        value={maxLength}
        onValueChange={(value) => setMaxLength(typeof value === "number" ? value : value[0])}
        min={6}
        max={48}
        step={6}
      />
      <p className="text-muted-foreground text-xs">Snaps to 6-inch increments (6–48 in).</p>
    </div>
  );
}

Range (two thumbs)

Pass an array value to get a range with one thumb per entry. onValueChange returns the array, so a [min, max] band — like filtering orders by weight — falls out naturally.

Weight filter2–30 lb

Two thumbs from an array value — show only orders within this weight band.

import { Slider } from "@vesyl/ui-next";
import { useState } from "react";

export default function SliderRange() {
  const [range, setRange] = useState([2, 30]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">Weight filter</span>
        <span className="text-muted-foreground tabular-nums">
          {range[0]}–{range[1]} lb
        </span>
      </div>
      <Slider
        value={range}
        onValueChange={(value) => setRange(typeof value === "number" ? [value] : [...value])}
        min={0}
        max={50}
      />
      <p className="text-muted-foreground text-xs">
        Two thumbs from an array value — show only orders within this weight band.
      </p>
    </div>
  );
}

Disabled

disabled blocks interaction and dims the control. Use it for values that are fixed by an upstream constraint — a carrier contract, a plan tier — but still worth showing.

Dimensional weight factor139

Locked by the carrier contract — disabled and dimmed.

import { Slider } from "@vesyl/ui-next";

export default function SliderDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">Dimensional weight factor</span>
        <span className="text-muted-foreground tabular-nums">139</span>
      </div>
      <Slider defaultValue={139} min={100} max={200} disabled />
      <p className="text-muted-foreground text-xs">
        Locked by the carrier contract — disabled and dimmed.
      </p>
    </div>
  );
}

Reference

Slider

The whole control. Extends base-ui Slider.Root props.

Prop	Type	Default	Description
`defaultValue`	`number \| number[]`	`[min, max]`	Initial value (uncontrolled); an array renders a thumb per entry
`value`	`number \| number[]`	—	Current value (controlled); an array renders a thumb per entry
`onValueChange`	`(value, eventDetails) => void`	—	Fires while the value changes; `value` is a number, or an array for a range
`onValueCommitted`	`(value, eventDetails) => void`	—	Fires once on pointer release / commit, after dragging ends
`min`	`number`	`0`	Lowest allowed value
`max`	`number`	`100`	Highest allowed value
`step`	`number`	`1`	Snap increment, measured from `min`
`largeStep`	`number`	`10`	Step for Page Up/Down and Shift + Arrow
`minStepsBetweenValues`	`number`	`0`	Minimum gap (in steps) between thumbs on a range slider
`disabled`	`boolean`	`false`	Block interaction and dim the control
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the track
`format`	`Intl.NumberFormatOptions`	—	Number formatting applied to the value
`name`	`string`	—	Field name when submitted inside a form
`className`	`string`	—	Merged onto the control element