Forms

Slider

Pick a value or a range.

Import

tsx

import { Slider } from "@cronus-ui/ui";

bash

npx cronus-ui add slider

Examples

Single thumb

A controlled single-value slider.

Volume40%

tsx

function SliderDemo() {
  const [volume, setVolume] = useState([40]);

  return (
    <div className="flex flex-col gap-4 max-w-xs">
      <div className="flex items-center justify-between text-sm">
        <Label>Volume</Label>
        <span className="font-mono text-fg">{volume[0]}%</span>
      </div>
      <Slider
        aria-label="Volume"
        value={volume}
        onValueChange={setVolume}
        min={0}
        max={100}
        step={1}
      />
    </div>
  );
}

Range

A two-thumb slider bound to a [min, max] tuple.

Price range$20 – $80

tsx

function SliderRangeDemo() {
  const [price, setPrice] = useState([20, 80]);

  return (
    <div className="flex flex-col gap-4 max-w-xs">
      <div className="flex items-center justify-between text-sm">
        <Label>Price range</Label>
        <span className="font-mono text-fg">
          ${price[0]} – ${price[1]}
        </span>
      </div>
      <Slider
        aria-label="Price range"
        value={price}
        onValueChange={setPrice}
        min={0}
        max={100}
        step={5}
      />
    </div>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

half.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component SliderHalf layout:inline style:slider {
  value:50
  aria-label:"Volume"
  label "Volume"
}

page "/audit/slider/half" type:custom {
  use SliderHalf
}

API Reference

Generated from the component's exported types.

SliderProps

Extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root>

Prop	Type	Default	Description
`value`	`number[]`	—	Controlled thumbs. Pair with `onValueChange`.
`defaultValue`	`number[]`	—	Uncontrolled initial thumbs.
`onValueChange`	`(value: number[]) => void`	—	Called when the value changes.
`onValueCommit`	`(value: number[]) => void`	—	Called when a thumb is released.
`min`	`number`	`0`	—
`max`	`number`	`100`	—
`step`	`number`	`1`	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`orientation`	`"horizontal" \| "vertical"`	—	—
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.
`name`	`string`	—	Submitted name when used in a form.