Slider

Contract

Overview

Machine-readable contract from Component Spec.

component: sliderexport: Sliderversion: 1attributes: data-refineui=slider

Anatomy

Part	data-refineui
root	slider

Variants

Axis	Values
size	sm, md

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Native
slider	input	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Slider } from "@refineui/react";

<Slider min={0} max={100} value={volume} onChange={setVolume} />

<Slider
  min={0}
  max={10}
  step={1}
  value={rating}
  onChange={setRating}
  size="md"
/>

API Reference

Prop	Default	Type	Description
value	—	number	Controlled value.
onChange	—	(value: number) => void	Event handler when value changes.
min	0	number	Minimum value.
max	100	number	Maximum value.
step	1	number	Step increment.
size	"md"	"sm" | "md"	Rail thickness: sm (2px) or md (4px).
disabled	false	boolean	Disables interaction.