GlassSlider class

A glass morphism slider following Apple's iOS 26 design patterns.

GlassSlider provides a sophisticated slider with glass track, draggable thumb with jelly physics, and smooth animations. It matches iOS's UISlider appearance and behavior with glass morphism effects.

Key Features

• Glass Track: Background track with glass effect
• Active Track: Colored portion showing current value
• Jelly Thumb: Draggable thumb with organic squash/stretch physics
• Haptic Feedback: Subtle feedback when reaching discrete values
• Continuous or Discrete: Support for continuous values or divisions
• Customizable: Full control over colors, sizes, and shapes

Usage

Basic Usage (Continuous)

double volume = 0.5;

GlassSlider(
  value: volume,
  onChanged: (value) {
    setState(() => volume = value);
  },
)

Discrete Values

double brightness = 3.0;

GlassSlider(
  value: brightness,
  min: 0.0,
  max: 5.0,
  divisions: 5,
  onChanged: (value) {
    setState(() => brightness = value);
  },
)

Within LiquidGlassLayer (Grouped Mode)

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 3,
    refractiveIndex: 1.59,
  ),
  child: Column(
    children: [
      GlassSlider(
        value: volume,
        onChanged: (value) => setVolume(value),
        label: 'Volume',
      ),
    ],
  ),
)

Standalone Mode

GlassSlider(
  value: brightness,
  onChanged: (value) => setBrightness(value),
  useOwnLayer: true,
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 3,
  ),
)

Custom Styling

GlassSlider(
  value: temperature,
  min: 0,
  max: 100,
  onChanged: (value) => setTemperature(value),
  activeColor: Colors.red,
  thumbColor: Colors.red,
  trackHeight: 6,
  thumbRadius: 16,
)