Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - Height Selector
A vertical height slider with custom 100-250cm range and unit display for physical measurement selection
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Height is vertical—natural metaphor! This React vertical slider uses custom min 100 max 250 range with cm units. Built with shadcn/ui Slider at h-64 height, the vertical orientation maps perfectly to height concept—perfect for profile forms, avatar creators, character customization, fitness apps, medical forms, or any height input where vertical slider reinforces the physical dimension being measured and feels more intuitive than horizontal.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Volume Control Style
Vertical slider with percentage display
Vertical with Labels
Vertical slider with scale markers
Temperature Control
Horizontal slider with custom range
Vertical Range
Vertical dual-handle range
Slider with Min/Max Labels
Horizontal slider with boundaries
Input
Standard input component