Editar foto
Slider with liquid lens
While dragging, the white thumb turns into a glass lens that magnifies the track; it adjusts brightness and warmth.
Settings
Code
<div class="uvq11-lsl" style="--br:.7;--wm:.35"><div class="ph" aria-hidden="true"><i class="sun"></i><i class="m1"></i><i class="m2"></i><i class="lk"></i></div><div class="pn"><p class="ti">Edit photo</p><div class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><div class="sl" role="slider" tabindex="0" aria-label="Brightness" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" aria-valuetext="70 %" data-k="br" style="--v:0.7"><span class="tk"><span class="fi"></span></span><span class="th"><span class="lz"><span class="tc"><span class="fi"></span></span></span></span></div><output>70</output></div><div class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.5V5a2 2 0 0 1 4 0v9.5a4 4 0 1 1-4 0z"/><path d="M12 10v6"/></svg><div class="sl" role="slider" tabindex="0" aria-label="Warmth" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35" aria-valuetext="35 %" data-k="wm" style="--v:0.35"><span class="tk"><span class="fi"></span></span><span class="th"><span class="lz"><span class="tc"><span class="fi"></span></span></span></span></div><output>35</output></div></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 Liquid Glass
See all Liquid GlassWhere to use it
A slider in the spirit of the newest phone interfaces: at rest the thumb is a plain white pill, and while you drag it swells into a clear lens with colored fringes that magnifies the track beneath it. Two of them sit in a glass panel and adjust the brightness and warmth of a landscape photo.
Set the lens magnification with its own control and the fill color with the main color. Each slider has full keyboard support, including Home, End and Page keys, so it suits photo editors, settings screens and media apps.