Skip to content

RangeSlider thumb's center doesn't align with division's center, thumb padding, and rounded corners don't work as expected #159586

Closed

Description

@TahaTesser

Steps to reproduce

#149591
#62567
#149589

These three issues also exist for RangeSlider widget. This breaks fundamental behaviors such as proper alignment, shape and padding.

Expected results

Thumb's center to align with division's center, proper thumb padding and rounded corners.

Actual results

Screenshot 2024-11-28 at 11 46 59

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 _discreetSliderValue = 0.6;
  RangeValues _discreteRangeSliderValues = const RangeValues(0.2, 0.6);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        sliderTheme: const SliderThemeData(
          trackHeight: 32,
          thumbColor: Colors.green,
          activeTrackColor: Colors.deepPurple,
          inactiveTrackColor: Colors.amber,
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Discrete Slider',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              Slider(
                  value: _discreetSliderValue,
                  divisions: 5,
                  onChanged: (double newValue) {
                    setState(() {
                      _discreetSliderValue = newValue;
                    });
                  }),
              Text(
                'Discrete Range Slider',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              RangeSlider(
                values: _discreteRangeSliderValues,
                divisions: 5,
                onChanged: (RangeValues newValues) {
                  setState(() {
                    _discreteRangeSliderValues = newValues;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Activity

  1. TahaTesser commented on Nov 28, 2024

    @TahaTesser
    ContributorAuthor

    These issues are also a blocker when migrating RangeSlider to updated M3 design.

  2. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    team-designOwned by Design Languages team
    on Nov 28, 2024
  3. self-assigned this
    on Nov 28, 2024
  4. moved this from To do to In progress in Nevercodeon Nov 28, 2024
  5. changed the title [-]`RangeSlider` thumb's center doesn't align with division's center and thumb padding + rounded corners don't work as expected[/-] [+]`RangeSlider` thumb's center doesn't align with division's center, thumb padding, and rounded corners don't work as expected[/+] on Nov 28, 2024
  6. moved this from In progress to Done (PR merged) in Nevercodeon Dec 9, 2024
  7. added
    r: fixedIssue is closed as already fixed in a newer version
    on Dec 9, 2024
  8. github-actions commented on Dec 23, 2024

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  9. locked as resolved and limited conversation to collaborators on Dec 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

found in release: 3.27Found to occur in 3.27frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Type

No type

Projects

  • Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions