Components

Slider

Select a value from a continuous or stepped range

Slider

Slider supports scalar and range values with pointer, keyboard, and form semantics.

import { useState } from "react";
import { Slider } from "@downcity/ui";

export function WidthSlider() {
  const [width, setWidth] = useState(72);

  return (
    <Slider
      value={width}
      min={48}
      max={100}
      onValueChange={(value) => {
        if (typeof value === "number") setWidth(value);
      }}
    />
  );
}

Pass two numbers through value or defaultValue for a range slider with two accessible thumbs.

Select

Choose one value from a grouped set of options

Switch

Toggle a single boolean setting

Table of Contents

Slider