Standard horizontal sliders conflict with vertical reading: 'increase' goes right, but the column advances leftward. Drag-up-to-increase puts the control back on the reading axis.

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))