Slider

A drag control for selecting a value along a continuous range.

Design question

A horizontal slider is counterintuitive on the vertical reading axis. What replaces it?

Vertical drag

글자

18Font size

행간

55Line spacing

글씨를 세로로 쓰는 것을 세로쓰기라 한다

Drag up to increase. Vertical sliders match the reading axis — up = more, down = less. Labels in vertical Korean above each track.

tsx
1// Drag-up-to-increase vertical slider
2function VerticalSlider({ value, onChange, min = 12, max = 32 }) {
3  const trackRef = useRef(null)
4
5  const handlePointer = (e) => {
6    const rect = trackRef.current.getBoundingClientRect()
7    const normalized = 1 - (e.clientY - rect.top) / rect.height
8    const clamped = Math.max(0, Math.min(1, normalized))

Guidance

✓Use drag-up-to-increase: upward motion = more, matches physical weight metaphor
✓Show current value adjacent to the track in horizontal text
✓Keep the track short and vertical — 120–200px is enough

Don't

✗Rotate a horizontal slider 90° — the interaction model breaks
✗Use a vertical slider for fine-grained color or date selection
✗Place the slider on the reading axis where it competes with text

Accessibility

role='slider', aria-valuenow/min/max. Arrow keys: up/right increase, down/left decrease. Page Up/Down jump.

Open Question

Should 'drag up = more' match the direction of physical weight (up = lighter = less) or follow the visual filled-track metaphor (up = filled = more)?

← PreviousSearch Next →Tabs

1	// Drag-up-to-increase vertical slider
2	function VerticalSlider({ value, onChange, min = 12, max = 32 }) {
3	const trackRef = useRef(null)
4
5	const handlePointer = (e) => {
6	const rect = trackRef.current.getBoundingClientRect()
7	const normalized = 1 - (e.clientY - rect.top) / rect.height
8	const clamped = Math.max(0, Math.min(1, normalized))