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,
)

Inheritance

Constructors

GlassSlider({required double value, required ValueChanged<double>? onChanged, Key? key, ValueChanged<double>? onChangeStart, ValueChanged<double>? onChangeEnd, double min = 0.0, double max = 1.0, int? divisions, String? label, Color? activeColor, Color? inactiveColor, Color thumbColor = Colors.white, double trackHeight = 4.0, double thumbRadius = 15.0, LiquidGlassSettings? settings, bool useOwnLayer = false, GlassQuality? quality}): Creates a glass slider.
const

Properties

activeColor → Color?: Color of the active track (left of thumb).
final
divisions → int?: The number of discrete divisions.
final
hashCode → int: The hash code for this object.
no setterinherited
inactiveColor → Color?: Color of the inactive track (right of thumb).
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → String?: Optional label shown above the thumb.
final
max → double: The maximum value of the slider.
final
min → double: The minimum value of the slider.
final
onChanged → ValueChanged<double>?: Called when the user is selecting a new value.
final
onChangeEnd → ValueChanged<double>?: Called when the user finishes dragging the slider.
final
onChangeStart → ValueChanged<double>?: Called when the user starts dragging the slider.
final
quality → GlassQuality?: Rendering quality for the glass effect.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
settings → LiquidGlassSettings?: Glass effect settings (only used when useOwnLayer is true).
final
thumbColor → Color: Color of the thumb.
final
thumbRadius → double: Radius of the thumb.
final
trackHeight → double: Height of the track.
final
useOwnLayer → bool: Whether to create its own layer or use grouped glass.
final
value → double: The current value of the slider.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<GlassSlider>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited