Valoración mínima3
05
HTML + CSSFilters
Stepped slider with tick marks
A slider that snaps to whole steps, with the handle growing as you drag and passed ticks lighting up.
Settings
16px
1x
Code
<div class="uv-frt"><div class="hd"><span>Minimum rating</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Some values only make sense in whole steps. A restaurant review site asking for a minimum of three stars, a hotel search by category, a gym app setting training days per week. The ticks show every possible stop and the handle snaps to each one, so nobody ends up at 3.7. Look for it as a stepped range slider.
Keep the number of steps low, five or six. With twenty ticks the marks blur into a line and the snapping stops being useful. Show the current value in large type next to the label, as in the demo.