px
HTML + CSSInputs
Scrubbable number input
Drag the label left or right to change the value, just like in design apps.
Settings
16px
1x
120
Code
<div class="uv-isc"><div class="rw"><label for="uv-isc-in" class="hd" title="Drag to change"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg><span>Radius</span></label><span class="fd"><input id="uv-isc-in" type="number" inputmode="numeric" min="0" max="120" value="24"><span class="un">px</span></span></div><div class="rl" aria-hidden="true"><i class="bar"></i><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b><b></b><b></b><b></b><b class="lg"></b></div><div class="pv" aria-hidden="true"></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Figma, Blender and most design tools let you change numbers by dragging their label, which is much faster than typing for fine adjustments. This input does the same: hover the label to see the resize cursor, drag horizontally to scrub, and hold Shift for bigger steps. A ruler with a progress line and a preview shape react live.
The number field is still editable by keyboard and respects its minimum and maximum. Set the maximum with the extra slider, rename the label and unit, and use it in settings panels, editors or configurators.