Precio40 € – 160 €
40 €160 €
HTML + CSSFiltros
Rango de precio con burbujas
Dos tiradores con burbuja de valor, el tramo elegido resaltado y el rango escrito arriba.
Ajustes
16px
1x
Código
<div class="uv-frp"><div class="hd"><span>Precio</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Su sitio natural es el filtro de precio de una tienda de muebles online: arrastras el tirador izquierdo para saltarte lo más barato y el derecho para no pasarte del presupuesto. La burbuja enseña la cifra exacta mientras arrastras. Si buscabas un slider de rango de precio en HTML y CSS, es este.
Redondea los valores a saltos que tengan sentido para tus precios, de diez en diez por ejemplo, en vez de mostrar 43 o 127. Pon el máximo cerca de tu producto más caro; si lo pones muy alto, la parte útil de la barra se queda apretada.