If both sliders are moved toward the same position with a small amount of discrete divisions, the thumbs will overlap as expected.
If the same is done with a larger number of divisions (enough so that the overlays collide) the thumbs will not overlap.
Continuous slider thumbs never overlap and, if the range is large enough, will not even explore all of the possibilities of the slider.
I am unsure if the lack of continuous overlapping is by design or not, but I believe the discrete behavior inconsistencies to be a bug. Upon initial observations, collision seems to be determined upon if the thumb shapes themselves are colliding, which causes problems when the divisions are smaller than the size of the thumb shape.
A demonstration of this behavior derived from your example is below:
import 'package:flutter/material.dart';
import 'package:flutter_range_slider/flutter_range_slider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RangeSlider Collision Bug',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RangeSliderSample(),
);
}
}
class RangeSliderSample extends StatefulWidget {
@override
_RangeSliderSampleState createState() => _RangeSliderSampleState();
}
class _RangeSliderSampleState extends State<RangeSliderSample> {
double _goodLowerValue = 1.0;
double _goodUpperValue = 11.0;
double _badLowerValue = 1.0;
double _badUpperValue = 12.0;
double _continuousLowerValue = 1.0;
double _continuousUpperValue = 50.0;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
title: Text('RangeSlider Demo'),
),
body: Container(
padding: const EdgeInsets.only(
top: 50.0,
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
Text(
'Good',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_goodLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 11.0,
lowerValue: _goodLowerValue,
upperValue: _goodUpperValue,
divisions: 11,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_goodLowerValue = newLowerValue;
_goodUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Good - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Good - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_goodUpperValue.toInt()}',
),
),
],
),
Text(
'Bad',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_badLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 12.0,
lowerValue: _badLowerValue,
upperValue: _badUpperValue,
divisions: 12,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_badLowerValue = newLowerValue;
_badUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Bad - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Bad - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_badUpperValue.toInt()}',
),
),
],
),
Text(
'Continuous',
textAlign: TextAlign.center,
),
Row(
children: <Widget>[
SizedBox(
width: 28.0,
child: Text(
'${_continuousLowerValue.toInt()}',
),
),
Expanded(
child: RangeSlider(
min: 1.0,
max: 50.0,
lowerValue: _continuousLowerValue,
upperValue: _continuousUpperValue,
showValueIndicator: true,
valueIndicatorMaxDecimals: 0,
onChanged: (double newLowerValue, double newUpperValue) {
setState(() {
_continuousLowerValue = newLowerValue;
_continuousUpperValue = newUpperValue;
});
},
onChangeStart:
(double startLowerValue, double startUpperValue) {
print(
'Continuous - Started with values: $startLowerValue and $startUpperValue');
},
onChangeEnd:
(double newLowerValue, double newUpperValue) {
print(
'Continuous - Ended with values: $newLowerValue and $newUpperValue');
},
),
),
SizedBox(
width: 28.0,
child: Text(
'${_continuousUpperValue.toInt()}',
),
),
],
),
],
),
),
),
);
}
}
Let me know if any part of this is unclear, thanks.
407 Jan 6, 2023
477 Jan 2, 2023
750 Jan 7, 2023
23 Nov 21, 2022
4 Aug 1, 2022
15 Sep 5, 2022
1.4k Dec 30, 2022
1.7k Jan 3, 2023
20 Oct 10, 2022
127 Dec 22, 2022
314 Dec 31, 2022
1 Nov 25, 2021
12 Sep 22, 2022
242 Dec 27, 2022
8 Oct 16, 2022
7 Nov 26, 2022
48 Dec 1, 2022
30 Jun 10, 2022
0 Dec 29, 2021