Skip to content
Pinky UI

forms

Tactile Range

A native range with quiet tactile thumb, fill and formatted value.

  • forms
  • slider
  • range
  • precision

Live preview

Quick usage

usage
import { TactileRange } from "@pinky-ui/systems";

<TactileRange label="Intensity" min={0} max={100} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
stepnumber1Native keyboard and drag increment.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Native input owns precision and events; visual layers are transform-only.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Bounded numeric preferences

When not to use

  • Exact or unbounded numeric entry

Skill

Purpose

TactileRange refines a native slider with restrained thumb feedback, fill and optional formatted output. Use it for volume, intensity, price or bounded numeric preferences.

Choose meaningful min/max/step values and always provide a label. Avoid precision-heavy financial entry, unbounded values or exaggerated spring travel that makes the thumb feel inaccurate.

Native keyboard and touch behaviour remain the source of truth. Reduced motion keeps an immediate thumb. Show the current value when users need precision, and pair with a numeric input when exact entry is important.

Open this skill on its own page