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

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