px
HTML + CSSChamps

Nombre à faire glisser

Fais glisser le libellé à gauche ou à droite pour changer la valeur, comme dans les applis de design.

Réglages

16px
1x
120

Code

<div class="uv-isc"><div class="rw"><label for="uv-isc-in" class="hd" title="Fais glisser pour modifier"><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>Rayon</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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Champs

Voir tout : Champs

Où l’utiliser

Figma, Blender et la plupart des outils de design permettent de changer un nombre en faisant glisser son libellé, bien plus rapide que la saisie pour les réglages fins. Ce champ fait pareil : au survol du libellé, le curseur de redimensionnement apparaît, on glisse horizontalement pour ajuster, et Maj donne de plus grands pas. Une règle et une forme d'aperçu réagissent en direct.

Le champ numérique reste modifiable au clavier et respecte son minimum et son maximum. Règle le maximum avec le curseur supplémentaire et utilise-le dans des réglages ou des configurateurs.