Skip to content

[Slider] Inactive/unselected stop indicator color is incorrect in the gen_defaults tokens. #153271

@TahaTesser

Description

@TahaTesser

Steps to reproduce

New Slider design uses stop indicator color and size for the tick marks in the discrete Slider. However, the new tokens use same color for the active and inactive stop indicator.

"md.comp.slider.stop-indicator.color": "secondaryContainer",
"md.comp.slider.stop-indicator.color-selected": "secondaryContainer",

If we apply this as is then we'll get inactive tick marks with the same color as inactive track color thus rendering them invisible.

Incorrect

Color? get inactiveTickMarkColor => _colors.secondaryContainer;
Screenshot 2024-08-12 at 14 19 59

Corrected

Color? get inactiveTickMarkColor => _colors.primary;
Screenshot 2024-08-12 at 14 25 55

This also seems incorrect in the web specs

image

Expected results

Correct token

Actual results

Incorrect token

Code sample

Code sample
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _value = 5.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Slider(
          value: _value,
          divisions: 10,
          // ignore: avoid_redundant_argument_values
          min: 0,
          max: 10,
          onChanged: (double value) {
            setState(() {
              _value = value;
            });
          },
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

~

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listdependency: materialMaterial design team may need to help usf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.team-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions