Slider

A hand-drawn range slider for selecting a numeric value.

Overview

A Slider selects a numeric value from a continuous or stepped range by dragging a thumb along a track. Use Input type="number" instead when a precise typed value matters more than a quick visual adjustment.

Anatomy

A sketchy rail (a thin rectangle) with a filled portion (from the start to the thumb) and a round thumb — all three shapes computed directly from @ghds/sketch-core, sharing one measured box and seed. On React and Web Components, a real, invisible <input type="range"> spans the full track and carries every interaction (dragging, clicking the track, and native Arrow/Home/End/PageUp/ PageDown keyboard behavior) with zero custom pointer/keydown code. React Native has no such native primitive, so dragging is hand-rolled with PanResponder (built into React Native core — no new gesture-library dependency).

Variants & States

Usage

Accessibility

• React / Web Components: the real, invisible <input type="range"> gives an implicit role="slider" plus browser-computed aria-valuenow/aria-valuemin/aria-valuemax for free — no custom ARIA wiring needed. aria-valuetext passes through as a plain attribute for a custom spoken value.
• React Native: accessibilityRole="adjustable" plus accessibilityValue={{min, max, now}} and accessibilityActions/onAccessibilityAction (increment/decrement) are the standard RN pattern for VoiceOver/TalkBack. Neither accessibilityValue nor accessibilityState.disabled has a React Native Web equivalent mapping — confirmed directly against createDOMProps — so aria-valuemin/aria-valuemax/aria-valuenow/aria-disabled are set directly for the web target, the same gap class already documented for Select’s aria-expanded and Switch’s aria-checked. onAccessibilityAction itself has no React Native Web wiring at all (confirmed directly) — it is a native-only (iOS/Android) affordance, verified manually per packages/react-native/AGENTS.md’s device/simulator requirement rather than by automated test. focusable/tabIndex make the control a real keyboard tab-stop on the web target (role="slider" isn’t one of React Native Web’s auto-focusable roles), but arrow-key step adjustment while focused is not yet wired there in v1 — onKeyDown isn’t part of real React Native’s View props, so it isn’t a lightweight addition; dragging with a mouse/touch works on every platform.
• See the Accessibility Guide for general conventions.

Content

The label names the value being adjusted (“Volume”, “Rating”), not the current reading or an instruction.

Props API

Code examples

// React — @ghds/react (real <input type="range">; read event.target.value)
import { Slider } from '@ghds/react/slider';
import { useState } from 'react';

const [volume, setVolume] = useState(30);
<Slider label="Volume" value={volume} onChange={(event) => setVolume(Number(event.target.value))} />;
<Slider label="Rating" min={0} max={10} step={1} defaultValue={7} />;

<!-- Web Components — @ghds/web-components -->
<script type="module">
  import '@ghds/web-components/slider';
</script>
<gh-slider label="Volume" value="30"></gh-slider>
<gh-slider label="Rating" min="0" max="10" step="1" value="7"></gh-slider>

// React Native — @ghds/react-native
// Drag only — no arrow-key stepping on React Native. Value arrives via onValueChange.
import { Slider } from '@ghds/react-native/slider';

<Slider label="Volume" value={volume} onValueChange={setVolume} />;

Live Demo

React and Web Components render live below. React Native can’t run in a browser without additional react-native-web wiring (not set up in this site), so its usage is shown as a code sample instead.