Reputation: 3
Let's imagine the following: I have two Sliders, each can get input from 0 to 10. But both together should also be limited to a max Input of 10.
So if the first Slider is set to 6, I want the second Slider to just allow Inputs from 0 to 4. But still, show the full Slider with 10 Divisions. The right side of the second Slider (5 to 10) should just be not settable for the User.
How can I achieve this? Thanks a lot!
Upvotes: 0
Views: 1763
Reputation: 12713
Check this out
class TwoSliders extends StatefulWidget {
@override
_TwoSlidersState createState() => _TwoSlidersState();
}
class _TwoSlidersState extends State<TwoSliders> {
double slider1 = 0;
double slider2 = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Slider(
onChanged: (value) {
if((value+slider2)<=10){
setState(() {
slider1 = value;
});
}
},
max: 10,
divisions: 10,
value: slider1,
label: slider1.toString(),
),
Slider(
onChanged: (value) {
if((value+slider1)<=10){
setState(() {
slider2 = value;
});
}
},
value: slider2,
max: 10,
divisions: 10,
label: slider2.toString(),
),
],
),
),
);
}
}
The Output:
Upvotes: 3
Reputation: 3842
In both of the onChanged()
callbacks, only update the value if it is inferior or equal to 10 minus the value of the other Slider.
Upvotes: 0