Slider

Self-contained glass, and the callback you should commit on.

LiquidGlassSlider is a track with a glass thumb that refracts it. It is self-contained: it supplies its own background and refracts its own track, so it needs no LiquidGlassView and takes no capture of your page. Drop it anywhere, on either engine.

Dart

LiquidGlassSlider(
  value: volume,
  onChanged: (v) => setState(() => volume = v),
  onChangeEnd: (v) => savePreference(v),
  activeColor: Colors.white,
  width: 280,
)

Parameter	Default	What it does
`value`	—	Position, in `minimumValue`..`maximumValue`.
`onChanged`	—	Fires on every pixel of the drag.
`onChangeStart` / `onChangeEnd`	`null`	Fire once, on grab and on release.
`minimumValue` / `maximumValue`	`0` / `1`	The range.
`isContinuous`	`true`	Report every change while dragging, or once at the end.
`activeColor`	system blue	The filled part of the track.
`inactiveColor`	`0x14000000`	The rest of the track.
`thumbColor`	`white`	The contracted rest thumb.
`width` / `height`	`null`	Shorthands for the same two fields on `layout`, and they win over them. Leave `height` alone unless you need to pin the footprint — it is derived from the thumb sizes.
`layout`	`LiquidGlassSliderLayout()`	All geometry: track, both thumb sizes, and the end icons.
`minimumIcon` / `maximumIcon`	`null`	Icons at the two ends. The track shortens to make room.
`style`	`null`	Overrides the thumb glass.
`motion`	`LiquidGlassLensMotionSpec()`	How hard the lifted thumb squashes and stretches as it is carried — see Motion.

Geometry#

Everything about the size lives in one descriptor. The thumb is a pair of sizes rather than one: the solid pill at rest, and the glass pill it morphs into while a finger is on the control. They are tuned to each other and should move together.

Dart

const LiquidGlassSliderLayout(
  width: 280,
  trackHeight: 6,
  thumbWidth: 37,           // at rest: the solid pill
  thumbHeight: 24,
  liftedThumbWidth: 58,     // held: the glass pill it becomes
  liftedThumbHeight: 38.333,
  iconSize: 20,
  iconGap: 8,
)

Comments

Comments are GitHub Discussions — reply from either place.