Fluid Slider

Usage

import { FluidSlider } from '@wdzyi/ui';

<FluidSlider label='Volume' defaultValue={64} />

<FluidSlider
  label='Speed'
  min={0.5}
  max={2}
  step={0.05}
  value={speed}
  onValueChange={setSpeed}
  format={(value) => value.toFixed(2) + '×'}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

labelstring

What it sets, on the left of the track. It names the slider for screen readers too, and its field as Speed value and so on.

value, onValueChangenumber, (value: number) => void

The value, when you hold the state, and the new one as it changes, whether it’s dragged, keyed or typed.

defaultValuenumber = the middle

Where it starts when it holds its own state.

min, max, stepnumber = 0, 100, 1

Its range, and the steps it moves in. A typed amount is kept inside the range and taken to the nearest step.

format(value: number) => string

How the value reads, on the right and to screen readers, such as 1.25× or 64%. By default it’s written to the step’s places. Whatever it puts around the number stays beside the field while you type.

namestring

Sent with a form, as a range input’s value would be.

disabledboolean = false

Faded, and it can’t be moved or typed into.

classNamestring

Added to its root, for its width.

Notes

• A press away from the fill’s edge glides it there over 240ms. A drag and the keys move it at once, so the edge stays under the pointer. On a touch screen, a press waits to see whether it’s a tap or the start of a scroll before it moves anything.
• Past either end, the track stretches that way by up to 12px, half of that when the pointer is 72px out, and thins a little as it goes. Letting go springs it back over 560ms, a touch past its rest and home, while the value stays at the end.
• Clicking the value, or Enter on the slider, turns the number into a field in the same type and place, all selected. Enter, Tab or clicking away reads what’s typed, unit and spaces aside, and the fill glides to it with the same events a drag sends. Escape puts it back, and anything it can’t read puts the old value back with a small shake. A drag that starts on the value still drags.
• Underneath is a real range input, so the arrows, Page Up and Page Down, Home and End all work, a form gets its value by its name, and a screen reader hears the formatted value. The edge fades out over 120ms wherever it passes under the name or the value, and the fill’s boundary carries on showing where it is.
• It fills the width it’s given, and the name is cut short before the value is. With reduced motion, the fill jumps, the track doesn’t stretch and a bad amount doesn’t shake.