Valoración mínima3
05
HTML + CSSFiltros
Slider con marcas y valor
Un slider que salta de paso en paso; el tirador crece al arrastrar y las marcas superadas se encienden.
Ajustes
16px
1x
Código
<div class="uv-frt"><div class="hd"><span>Valoración mínima</span><b class="out">3</b></div><div class="tk"><span class="fill"></span><span class="tick" style="left:0%"></span><span class="tick" style="left:20%"></span><span class="tick" style="left:40%"></span><span class="tick" style="left:60%"></span><span class="tick" style="left:80%"></span><span class="tick" style="left:100%"></span><i class="h"></i></div><div class="lb"><span>0</span><span>5</span></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
Hay valores que solo tienen sentido en números enteros. Una web de reseñas de restaurantes que pide al menos tres estrellas, un buscador de hoteles por categoría o una app de gimnasio con días de entreno por semana. Las marcas enseñan cada parada posible y el tirador se engancha a ellas. Un slider por pasos de toda la vida.
No pongas muchos pasos, cinco o seis. Con veinte marcas se funden en una línea y el salto deja de ayudar. Muestra el valor actual en grande junto a la etiqueta, como en la demo.