slider_m3e

Material 3 Expressive Sliders for Flutter. Single-value and range sliders, with token-driven colors, sizes, and shapes.

  • SliderM3E — single-value slider, optional start/end icons, discrete or continuous
  • RangeSliderM3E — range selection with the same styling
  • sliderThemeM3E(...) — generate a SliderThemeData from M3E tokens

All styling reads the M3ETheme ThemeExtension from your m3e_design package.

Monorepo Layout

packages/
  m3e_design/
  slider_m3e/

pubspec.yaml references ../m3e_design.

Usage

import 'package:slider_m3e/slider_m3e.dart';

// Single slider
SliderM3E(
  value: 0.35,
  onChanged: (v) {},
  divisions: 10, // discrete
  size: SliderM3ESize.large,
  emphasis: SliderM3EEmphasis.primary,
  shapeFamily: SliderM3EShapeFamily.round, // or square (expressive)
  startIcon: const Icon(Icons.volume_mute),
  endIcon: const Icon(Icons.volume_up),
);

// Range slider
RangeSliderM3E(
  values: const RangeValues(0.2, 0.8),
  onChanged: (r) {},
  divisions: 8,
  size: SliderM3ESize.medium,
  emphasis: SliderM3EEmphasis.secondary,
  shapeFamily: SliderM3EShapeFamily.square,
);

Tokens mapping

  • Colors:
    • Active: primary / secondary / onSurface (by emphasis)
    • Inactive track: onSurface @ 24% opacity
    • Overlay: active color @ 12% opacity
    • Value indicator: secondaryContainer with onSecondaryContainer text
  • Sizes:
    • Track height: small ≈2dp, medium ≈4dp, large ≈6dp
    • Thumb radius: small ≈10dp, medium ≈12dp, large ≈14dp
  • Density: compact slightly reduces track and thumb sizes
  • Shapes: round uses round thumb, square uses a rounded-rect thumb for an expressive look

Accessibility

  • Set semanticLabel to announce values (percentage format by default).
  • Discrete sliders (with divisions) will show value indicators when showValueIndicator is enabled (or onlyForDiscrete by default).

License

MIT

Explore this component in the M3E Gallery (GitHub Pages):

https://

To run the Gallery locally:

cd apps/gallery
flutter run -d chrome

Last updated: 2025-10-23

Detailed Guide

What this package provides

SliderM3E and RangeSliderM3E that follow Material 3 Expressive tokens for colors, shapes, and density.

Installation

  • Monorepo (local path): already configured alongside m3e_design.
  • Pub (when published):
dependencies:
  slider_m3e: ^0.1.0
  m3e_design: ^0.1.0

Minimum SDK: Dart >=3.5.0; Flutter >=3.22.0.

Dependencies

  • flutter
  • m3e_design

Quick start

// Single-value slider
SliderM3E(
  value: value,
  onChanged: (v) => setState(() => value = v),
  min: 0,
  max: 100,
  divisions: 10,
  label: '$value',
)

// Range slider
RangeSliderM3E(
  values: range,
  onChanged: (r) => setState(() => range = r),
  min: 0,
  max: 100,
)

Key parameters

  • value: double — Current slider value (SliderM3E).
  • values: RangeValues — Current range (RangeSliderM3E).
  • onChanged: ValueChanged<double/RangeValues> — Callback for value changes.
  • min / max / divisions: Configure value domain and discrete steps.
  • label: String? — Optional value label.
  • activeColor / inactiveColor / thumbColor: Color? overrides.

Theming with m3e_design

Track shape, thickness, and colors follow M3E tokens; respects density.

Accessibility

  • Ensure sufficient contrast; provide semantics via labels when necessary.

Libraries

slider_m3e