styple

Slider

Enable the user to select a value from a range.

Examples

import { Slider } from "@styple/design-system";

<Flex
  css={{
    gap: "$xl",
    alignItems: "center"
  }}
>
  <Container css={{ width: "$3xl" }}>
    <Slider defaultValue={[50]} max={100} step={1} />
  </Container>
  <Slider orientation="vertical" defaultValue={[50]} max={100} step={1} />
</Flex>

API Reference

See Radix-UI Slider (v0.1.4) for details. This only covers styple abstractions.

Slider

A styled abstraction for the entire primitive. Props are forwarded to Slider.Root.

Skeleton

Spinner