Works everywhere

Slider works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/slider) — the library detects the runtime automatically.

Slider

Slider renders an <input type="range"> styled with prokodo design tokens. Supports both single-thumb and dual-thumb range modes.

Live demo →

---

Overview

import { Slider } from "@prokodo/ui/slider"
;<Slider
  name="volume"
  label="Volume"
  min={0}
  max={100}
  step={1}
  value={volume}
  onChange={setVolume}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Slider } from "@prokodo/ui/slider"

CSS:

import "@prokodo/ui/slider.css"

---

Props

Prop	Type	Default	Required	Description
id	string	—	✅	HTML id for the slider (required for accessibility).
label	string	—	—	Slider label text.
value	number | string	—	—	Controlled slider value.
defaultValue	number | string	—	—	Uncontrolled initial value.
min	number	0	—	Minimum value.
max	number	100	—	Maximum value.
step	number	1	—	Step increment.
snap	boolean	false	—	Snap value to step increments.
marks	boolean | SliderMark[]	false	—	Show tick marks or custom marks.
disabled	boolean	false	—	Disable the slider.
required	boolean	false	—	Mark field as required.
hideLabel	boolean	false	—	Visually hide the label.
labelProps	LabelProps	—	—	Props forwarded to the label.
valueLabelProps	object	—	—	Props for the value label tooltip.
color	Variants	—	—	Accent color variant.
errorText	string	—	—	Error message.
helperText	string	—	—	Helper text shown below.
onChange	(value: number) => void	—	—	Called on value change.
className	string	—	—	CSS class on root element.

See src/components/slider/Slider.model.ts for the full SliderProps type.

---

Design Tokens

Customise Slider via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
--pk-slider-track-height	4px	Track height
--pk-slider-track-bg	var(--pk-color-border)	Unfilled track colour
--pk-slider-fill-from	var(--pk-color-brand)	Fill gradient start
--pk-slider-fill-to	var(--pk-color-accent)	Fill gradient end
--pk-slider-label-fg	var(--pk-color-fg)	Label text colour
--pk-slider-thumb-size	24px	Thumb diameter
--pk-slider-thumb-border	var(--pk-color-surface)	Thumb border / halo
--pk-slider-tooltip-bg	var(--pk-color-fg)	Tooltip background
--pk-slider-tooltip-fg	var(--pk-color-surface)	Tooltip text colour
--pk-slider-timing	150ms	Animation duration

AIC Note

Use the standard import path in application code:

import { Slider } from "@prokodo/ui/slider"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.4.1	Use of Color (A)	🔍 Manual review	Color must not be the only means of conveying information (e.g. error states, required field markers).
2.1.1	Keyboard (A)	🔍 Manual review	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.5.3	Label in Name (A)	✅ Fulfilled	For components with a visible label, the accessible name must contain or match the visible label text.
3.3.2	Labels or Instructions (A)	✅ Fulfilled	Every form input requires a programmatically associated label or a visible instruction.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 5 test file(s) · 7 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Slider in Storybook

---

Source

src/components/slider/Slider.model.ts