Repository navigation
[material_ui] Discrete Slider with rounded track selects the neighbouring division when tapping ticks near the ends #194855
Description
On a discrete Slider with a rounded track shape, tapping a tick near either end of the track can select the neighbouring division instead.
The ticks are painted inset from the track ends by trackHeight / 2, but the tap position is mapped against the full track length, so the snap boundaries don't line up with where the ticks are drawn.
Steps to reproduce
With a 320 px wide slider, trackHeight: 40, RoundedRectSliderTrackShape and 10 divisions, tap the center of each tick.
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: Scaffold(body: Demo())));
class Demo extends StatefulWidget {
const Demo({super.key});
@override
State<Demo> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
double value = 0;
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 320,
child: SliderTheme(
data: const SliderThemeData(
trackHeight: 40,
trackShape: RoundedRectSliderTrackShape(),
),
child: Slider(
value: value,
divisions: 10,
label: '${(value * 10).round()}',
onChanged: (v) => setState(() => value = v),
),
),
),
);
}
}Expected results
Tapping a tick selects that tick.
Actual results
| tapped tick | selected |
|---|---|
| 0 | 1 |
| 1 | 2 |
| 2-8 | same as tapped |
| 9 | 8 |
| 10 | 9 |
To select tick 0 you have to tap to the left of it. The same thing happens on RangeSlider.
This is separate from #184391, which looks like it comes from an invalid range rather than the tap mapping.
Activity
puneetkukreja98 commentedon Oct 21, 2026
Per the discussion in this flutter/packages#12927 (review), filing a new issue was suggested.
Routing this to team-design.
[-]Discrete Slider with rounded track selects the neighbouring division when tapping ticks near the ends[/-][+][material_ui] Discrete Slider with rounded track selects the neighbouring division when tapping ticks near the ends[/+][material_ui] Fix discrete Slider selecting the neighboring tick near…