Loading…

Exposure Slider

beta

A camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.

Forms
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add exposure-slider

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ExposureSlider } from "@/components/ui/exposure-slider";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Stops
Without Indicator
Disabled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ExposureSlider>

Prop	Type	Default
`accent`	`"primary" \| "warning" \| "destructive" \| "success" \| "info" \| "foreground"`	`"warning"`
`defaultValue` Initial value when uncontrolled.	`number`	`0`
`disabled`	`boolean`	`false`
`formatValue` Formats the value for the ring and for `aria-valuetext`, e.g. `v => \`${v} EV\``.	`(value: number) => string`	`String`
`largeStep` Steps moved by Page Up / Page Down.	`number`	`10`
`max`	`number`	`20`
`min`	`number`	`-20`
`name` Submits the value with a form under this name.	`string`	—
`onValueChange` Called on every change — each notch crossed while dragging, each key press.	`(value: number) => void`	—
`onValueCommit` Called when an interaction ends: pointer released, or a key press.	`(value: number) => void`	—
`showIndicator` Show the ring with the current value above the ruler.	`boolean`	`true`
`step`	`number`	`1`
`value` Controlled value.	`number`	—

Plus every attribute of <div> except defaultValue, onChange, children.

Accessibility

The ruler is a focusable role="slider" with aria-valuenow, -valuemin, -valuemax and an aria-valuetext taken from formatValue. Arrow keys move one step (Left/Right follow the reading direction), Page Up/Down move largeStep, Home/End jump to the ends — so the drag is never the only way to set it. aria-label and aria-labelledby passed to the component land on the slider, and a development warning fires when it has no name. The ring and notches are aria-hidden: the slider already reports the value. The settle animation is a CSS transition and stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

accent

"warning"

defaultValue

Initial value when uncontrolled.

number

0

disabled

boolean

false

formatValue

Formats the value for the ring and for aria-valuetext, e.g. v => \${v} EV\``.

(value: number) => string

String

largeStep

Steps moved by Page Up / Page Down.

number

10

max

number

20

min

number

-20

name

Submits the value with a form under this name.

string

—

onValueChange

Called on every change — each notch crossed while dragging, each key press.

(value: number) => void

—

onValueCommit

Called when an interaction ends: pointer released, or a key press.

(value: number) => void

—

showIndicator

Show the ring with the current value above the ruler.

boolean

true

step

number

1

value

Controlled value.

number

—