Forms

Slider

A single-value slider. A native <input type="range">, styled, so keyboard (arrows, Page Up/Down, Home/End), touch, forms and screen readers work out of the box. Give it a name with Field, aria-label or aria-labelledby.

Pixel size

Steps

demos/slider.tsx

import { Field } from "pixelbits/field";
import { Slider } from "pixelbits/slider";

export default function Demo() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <Field label="Pixel size">
        <Slider min={4} max={16} defaultValue={9} />
      </Field>
      <Field label="Steps">
        <Slider min={0} max={5} defaultValue={2} ticks />
      </Field>
    </div>
  );
}

Installation

npm: import

import { Slider } from "pixelbits/slider";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/slider.json

API

<Slider>

Example

<Field label="Pixel size">
  <Slider min={4} max={16} defaultValue={9} onValueChange={setSize} />
</Field>

Prop	Type	Default	Description
value	number	—	The current value (controlled).
defaultValue	number	min	The value at first (uncontrolled).
onValueChange	(value: number) => void	—	Called with the new value while the user drags or uses the keys.
min	number	0	Lowest value.
max	number	100	Highest value.
step	number	1	Distance between values; arrow keys move by one step.
ticks	boolean	false	Draw a small tick for every step (keep the number of steps low).