Throttle Lever · Sliders

Q: How do I set a range input to an exact value?

Focus input#slider-native (min 0, max 100, step 5) and send arrow keys, asserting #slider-native-value. Stepping lands exactly; dragging by pixels lands near. Setting .value directly works but skips the input events a real user generates.

Q: How do I assert a custom slider's value?

Read aria-valuenow on #slider-custom-handle (role="slider"), never the handle's pixel position. The custom lever also accepts arrow keys when focused — the accessible escape hatch — and mirrors its value into #slider-custom-value.

Two throttle levers: a native range input that responds to arrow keys, and a custom pointer-event lever. Landing on an exact value is the challenge.

Set thrust to exactly 65%. The autopilot accepts arrow keys; the co-pilot dragged and missed.

Sliders is a medium Mouse & Keyboard challenge on Fun UI Playground. Two throttle levers: a native range input that responds to arrow keys, and a custom pointer-event lever. Landing on an exact value is the challenge. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “slider-”, and the techniques it exercises are range inputs, arrow-key stepping, pointer-event dragging, assert exact values.

At a glance

Category: Mouse & Keyboard
Difficulty: medium
Teaches: range inputs · arrow-key stepping · pointer-event dragging · assert exact values
Backend: None — runs entirely in the browser
Locators: Stable id and data-testid, prefixed slider-

Selectors on this page

Locator	What it is
`input#slider-native` `#slider-native-value`	Native: input#slider-native (min=0 max=100 step=5), live value in #slider-native-value
`#slider-custom` `#slider-custom-handle` `#slider-custom-value`	Custom: #slider-custom track with #slider-custom-handle (role="slider", aria-valuenow kept in sync), value in #slider-custom-value

Frequently asked questions

How do I set a range input to an exact value?

Focus input#slider-native (min 0, max 100, step 5) and send arrow keys, asserting #slider-native-value. Stepping lands exactly; dragging by pixels lands near. Setting .value directly works but skips the input events a real user generates.

How do I assert a custom slider's value?

Read aria-valuenow on #slider-custom-handle (role="slider"), never the handle's pixel position. The custom lever also accepts arrow keys when focused — the accessible escape hatch — and mirrors its value into #slider-custom-value.

More Mouse & Keyboard

Updated 2026-09-07

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.