Precio40 € – 160 €
40 €160 €
HTML + CSSFiltres
Curseur de prix à bulles
Deux poignées avec une bulle de valeur, la plage choisie mise en avant et la fourchette affichée au-dessus.
Réglages
16px
1x
Code
<div class="uv-frp"><div class="hd"><span>Prix</span><b class="out">40 € – 160 €</b></div><div class="tk"><span class="fill"></span><i class="h a" data-h="a"><em>40 €</em></i><i class="h b" data-h="b"><em>160 €</em></i></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 Filtres
Où l’utiliser
Sa place naturelle, c’est le filtre de prix d’une boutique de meubles en ligne : la poignée de gauche écarte les petits prix, celle de droite vous garde dans votre budget. Une bulle affiche le montant exact pendant le glissement. Si vous cherchiez un slider de prix à double poignée en HTML et CSS, le voici.
Arrondissez les valeurs à des paliers logiques, par dizaines par exemple, plutôt que d’afficher 43 ou 127. Placez le maximum près de votre produit le plus cher ; trop haut, la partie utile de la barre se retrouve écrasée.