Category / Section
How to enable thumb while interacting the Flutter Slider (SfSlider) ?
1 min read
In Syncfusion® Flutter Sliders, you can configure the slider to display the thumb only during user interaction.
You can achieve this by using the thumb overlay feature. Set the thumbRadius property to zero in the SfSliderThemeData to hide the thumb during load time. The thumb overlay will then act as the thumb during interaction.
double _value= 50.0;
@override
Widget build(BuildContext) {
return Scaffold(
body: SfSliderTheme(
data: SfSliderThemeData(
thumbRadius: 0,
overlayRadius: 10,
overlayColor: Colors.blue,
),
child: SfSlider(
min: 0,
max: 100,
value: _value,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
}
),
),
);
}
Output
Check the following links for more features in Syncfusion® Flutter Sliders:
- Syncfusion® Flutter Slider product page
- User guide documentation for Syncfusion® Flutter Slider
- pub.dev
Live Samples
Blogs about Flutter Slider
