Photonix UI - React Components, Templates & Figma Design System

Slider

Allows users to select a value from a range.

Value: 50

Usage

import { Slider } from '@photonix/ultimate';

<Slider value={50} min={0} max={100} onChange={val => console.log(val)} />

Prop	Type	Default	Description
value	`number`	`-`	Current value (controlled)
defaultValue	`number`	`0`	Default value (uncontrolled)
min	`number`	`0`	Minimum value
max	`number`	`100`	Maximum value
step	`number`	`1`	Step value
onChange	`((value: number) => void)`	`-`	Callback when value changes
disabled	`boolean`	`false`	Disabled state
className	`string`	`-`	Custom class name

Restrict selection to specific intervals.

Steps of 25

Steps of 1

Steps & Range

<Slider min={0} max={100} step={25} defaultValue={50} />
<Slider min={0} max={10} step={1} defaultValue={5} />

Disabled state.

States

<Slider disabled defaultValue={30} />