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
Ver todos: FiltrosDó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.