Component · controls

Liquid glass slider

Continuous value.

Also called volume

Two labelled sliders in a glass panel, with resting and held lens thumbs over a procedural backdrop.
Two labelled sliders in a glass panel, with resting and held lens thumbs over a procedural backdrop. (light)
Two labelled sliders in a glass panel, one with a resting solid thumb and one with a larger held lens thumb, over a zoomed night skyline and its waterline.
Two labelled sliders in a glass panel, one with a resting solid thumb and one with a larger held lens thumb, over a zoomed night skyline and its waterline. (dark)

Spec

Material
track: flat glass groove · fill: solid accent · thumb: white capsule, clear lens while dragged
Profile
convex thumb
Geometry
track 6–8 tall, radius 4; thumb capsule 36×22 (iOS 26 style) or circle 22–28 — keep the thumb ≥ 3× the track height
Bezel (px)
thumb h/2
Displacement (px)
0.4 × thumb h/2 at rest, up to 0.5 while dragged
Blur (px)
0

Anatomy

  • label + value row
  • track
  • accent fill
  • thumb

States

  • rest
  • drag: thumb grows 1.2–1.4× and becomes clear glass magnifying the track
  • disabled

Rules

  • Drag must change thickness/size, not only colour.
  • Value label above right, secondary text colour.