Fix discrete `Slider` and `RangeSlider` to enforce thumb height padding when the track shape is non-rounded #164703

TahaTesser · 2025-03-06T12:16:01Z

Fixes Discrete Slider and RangeSlider applies thumb padding when using custom Slider shapes

Code Sample

expand to view the code sample

import 'package:flutter/material.dart';

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

class RangeSliderExampleApp extends StatelessWidget {
  const RangeSliderExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        sliderTheme: const SliderThemeData(
          trackHeight: 32,
          trackShape: RectangularSliderTrackShape(),
          rangeTrackShape: RectangularRangeSliderTrackShape(),
          thumbColor: Colors.amber,
        ),
      ),
      home: Scaffold(
        body: Column(
          spacing: 20.0,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Slider(
              value: 100,
              max: 100,
              divisions: 100,
              onChanged: (double value) {},
            ),
            RangeSlider(
              values: const RangeValues(0, 100),
              max: 100,
              divisions: 100,
              onChanged: (RangeValues values) {},
            ),
          ],
        ),
      ),
    );
  }
}

Before

After

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

QuncCccccc

This LGTM. Thanks for the fix. Just a little confused about the numbers in the test.

QuncCccccc · 2025-03-11T23:19:58Z

packages/flutter/test/material/range_slider_test.dart

+      material,
+      paints
+        // Start thumb.
+        ..circle(x: sliderPadding, y: 300.0, color: theme.colorScheme.primary)


Just a question, how do we get this 24? It looks like sliderPadding isn't used anywhere.

This comes from the track padding applied by base track shape in RangeSlider widget.

Here trackLeft and trackRight are 24 pixels.

flutter/packages/flutter/lib/src/material/slider_theme.dart

Lines 2213 to 2216 in 234b50a

final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);

final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;

final double trackRight = trackLeft + parentBox.size.width - math.max(thumbWidth, overlayWidth);

final double trackBottom = trackTop + trackHeight;

I made such track padding customizable in the Slider widget last year (#156143) but it's not yet implemented in RangeSlider but the I used the same wording here "slider padding" since it's effectively the same thing.

I just filed an issue #165046 and assigned. I will complete the Slider padding work for RangeSlider. Thanks for the reminder.

Ah I see! Could you add a comment above the number? Thanks a lot for the explanation!

Added a comment

QuncCccccc · 2025-03-18T03:51:57Z

The failed Google testing seems related to M2 style.

TahaTesser · 2025-03-18T15:32:17Z

@QuncCccccc
Thanks! I've pushed which a commit restores like discrete padding the way it was before the this PR and renamed the same discrete padding in RangeSlider to be consistent.

Looks like checks are green. Could you please confirm this fixes the issue you described?

QuncCccccc · 2025-04-16T22:48:28Z

Seems the inactive track part has been fixed🎉, but for the active track, I can still see some failures:) Will talk with @TahaTesser offline.

TahaTesser · 2025-04-23T20:39:27Z

Seems the inactive track part has been fixed🎉, but for the active track, I can still see some failures:) Will talk with @TahaTesser offline.

Thanks! I'm pretty stumped since the current code in the PR is just restoring the track padding to the way it was before the original slider padding fix.

…ng when the track shape is non-rounded

QuncCccccc

LGTM! Thanks for your patience. The Scuba diffs look very small, so I think we should just accept them.

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

@OverRide

…ng when the track shape is non-rounded (flutter#164703) Fixes [Discrete `Slider` and `RangeSlider` applies thumb padding when using custom Slider shapes](flutter#161805) ### Code Sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const RangeSliderExampleApp()); class RangeSliderExampleApp extends StatelessWidget { const RangeSliderExampleApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( sliderTheme: const SliderThemeData( trackHeight: 32, trackShape: RectangularSliderTrackShape(), rangeTrackShape: RectangularRangeSliderTrackShape(), thumbColor: Colors.amber, ), ), home: Scaffold( body: Column( spacing: 20.0, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Slider( value: 100, max: 100, divisions: 100, onChanged: (double value) {}, ), RangeSlider( values: const RangeValues(0, 100), max: 100, divisions: 100, onChanged: (RangeValues values) {}, ), ], ), ), ); } } ``` </details> ### Before <img width="929" alt="Screenshot 2025-03-06 at 13 33 17" src="https://github.com/user-attachments/assets/a089674f-4931-4808-9663-1cd540bf7b11" /> ### After <img width="929" alt="Screenshot 2025-03-06 at 13 33 28" src="https://github.com/user-attachments/assets/77fe5708-f2e4-4734-92c2-46e4d8338d0e" /> ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Mar 6, 2025

TahaTesser marked this pull request as ready for review March 6, 2025 14:26

TahaTesser requested a review from QuncCccccc March 10, 2025 11:45

QuncCccccc reviewed Mar 11, 2025

View reviewed changes

TahaTesser requested a review from QuncCccccc March 12, 2025 11:23

QuncCccccc approved these changes Mar 12, 2025

View reviewed changes

TahaTesser force-pushed the fix_sliders_discrete_padding branch 2 times, most recently from 3e364c5 to 3b67573 Compare March 17, 2025 08:22

TahaTesser force-pushed the fix_sliders_discrete_padding branch from 1bb820b to 6a39a39 Compare March 19, 2025 09:32

QuncCccccc self-requested a review April 9, 2025 18:27

TahaTesser and others added 2 commits April 24, 2025 20:44

Fix discrete Slider and RangeSlider to enforce thumb height paddi…

77d03b6

…ng when the track shape is non-rounded

Kick tests

6de6ab6

TahaTesser force-pushed the fix_sliders_discrete_padding branch from 5a412b5 to 77d03b6 Compare April 24, 2025 17:44

QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 29, 2025

QuncCccccc approved these changes Apr 29, 2025

View reviewed changes

auto-submit bot added this pull request to the merge queue Apr 29, 2025

Merged via the queue into flutter:master with commit b6e964b Apr 30, 2025
76 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Apr 30, 2025

engine-flutter-autoroll mentioned this pull request Apr 30, 2025

Roll Flutter from cfb887cd5f41 to fffe394cdd2d (158 revisions) flutter/packages#9179

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 30, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

ef79480

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll mentioned this pull request Apr 30, 2025

Roll Flutter from cfb887cd5f41 to fffe394cdd2d (158 revisions) flutter/packages#9180

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 30, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

1b74d2b

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll mentioned this pull request May 1, 2025

Roll Flutter from cfb887cd5f41 to fe60a2b0b7af (184 revisions) flutter/packages#9183

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 1, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

e735a82

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

Piinks mentioned this pull request May 2, 2025

Flutter Notable Commits - 2025 #161460

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 3, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

4cbe3ad

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

TahaTesser deleted the fix_sliders_discrete_padding branch May 3, 2025 16:14

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 3, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

5552599

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 4, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

0961b24

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

defba3e

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

55b0fce

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

0037547

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

6e1dc35

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

fd6c92d

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

34f58f3

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

17ef144

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 5, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

2fb0f87

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

6035a0f

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

b03c346

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

33a602d

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 6, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

f65aef5

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

eeea80b

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

aa344b9

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

231f3ee

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

bac94c9

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

6bd9a79

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

caca8f7

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 7, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

4b6a83b

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

02a6537

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

33b78b7

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

22cfbd0

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

3d30c74

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

b6e964bd0 Fix discrete Slider and RangeSlider to enforce thumb he…

7a751db

…ight padding when the track shape is non-rounded (flutter/flutter#164703)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix discrete `Slider` and `RangeSlider` to enforce thumb height padding when the track shape is non-rounded #164703

Fix discrete `Slider` and `RangeSlider` to enforce thumb height padding when the track shape is non-rounded #164703

Uh oh!

TahaTesser commented Mar 6, 2025

Uh oh!

QuncCccccc left a comment

Uh oh!

QuncCccccc Mar 11, 2025 •

edited

Loading

Uh oh!

TahaTesser Mar 12, 2025 •

edited

Loading

Uh oh!

QuncCccccc Mar 12, 2025

Uh oh!

TahaTesser Mar 17, 2025

Uh oh!

QuncCccccc commented Mar 18, 2025

Uh oh!

TahaTesser commented Mar 18, 2025 •

edited

Loading

Uh oh!

QuncCccccc commented Apr 16, 2025

Uh oh!

TahaTesser commented Apr 23, 2025

Uh oh!

QuncCccccc left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
	final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
	final double trackRight = trackLeft + parentBox.size.width - math.max(thumbWidth, overlayWidth);
	final double trackBottom = trackTop + trackHeight;

Fix discrete Slider and RangeSlider to enforce thumb height padding when the track shape is non-rounded #164703

Fix discrete Slider and RangeSlider to enforce thumb height padding when the track shape is non-rounded #164703

Uh oh!

Conversation

TahaTesser commented Mar 6, 2025

Code Sample

Before

After

Pre-launch Checklist

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TahaTesser Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Mar 12, 2025

Choose a reason for hiding this comment

Uh oh!

TahaTesser Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented Mar 18, 2025

Uh oh!

TahaTesser commented Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

QuncCccccc commented Apr 16, 2025

Uh oh!

TahaTesser commented Apr 23, 2025

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix discrete `Slider` and `RangeSlider` to enforce thumb height padding when the track shape is non-rounded #164703

Fix discrete `Slider` and `RangeSlider` to enforce thumb height padding when the track shape is non-rounded #164703

QuncCccccc Mar 11, 2025 •

edited

Loading

TahaTesser Mar 12, 2025 •

edited

Loading

TahaTesser commented Mar 18, 2025 •

edited

Loading