Slider

Pick a number by dragging. Ranges included.

Choose a number by dragging. Pass an array as value and you get one thumb per entry — a range.

export const client = "only";

import { useState } from "react";
import { Slider, Label } from "@squadbase/vantage/ui";

export default function Example() {
  const [threshold, setThreshold] = useState(40);
  const [range, setRange] = useState([20, 80]);
  return (
    <div className="flex w-80 flex-col gap-8">
      <div className="grid gap-3">
        <Label>しきい値: {threshold}</Label>
        <Slider
          value={threshold}
          onValueChange={(value) => setThreshold(value as number)}
        />
      </div>
      <div className="grid gap-3">
        <Label>
          範囲: {range[0]} 〜 {range[1]}
        </Label>
        <Slider
          value={range}
          onValueChange={(value) => setRange(value as number[])}
        />
      </div>
    </div>
  );
}

import { Slider } from "@squadbase/vantage/ui";

PropType

value?number | number[]

Thumb position(s). An array makes it a range.

Typenumber | number[]

defaultValue?number | number[]

Initial value when uncontrolled.

Typenumber | number[]

onValueChange?(value: number | number[]) => void

Fired on change, in the same shape you passed to `value`.

Type(value: number | number[]) => void

min?number

Lower bound.

Typenumber

Default0

max?number

Upper bound.

Typenumber

Default100

step?number

Increment.

Typenumber

Default1

disabled?boolean

Disable interaction.

Typeboolean

Thumbs are aligned to the track’s edges, so they never overhang it at min or max.