How to create a Flutter Slider with labels?
In Flutter Slider, you can add labels by following the below steps.
Step 1: Add Syncfusion® Flutter Sliders package to your dependencies in pubspec.yaml file.
Step 2: Set the value of the SfSlider.showLabels property as true. For the labels to render in numeric SfSlider, you must set the SfSlider.interval property. It is required to set SfSlider.interval, SfSlider.dateIntervalType, and SfSlider.dateFormat for date SfSlider.
double _value = 50.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfSlider(
min: 0.0,
max: 100.0,
value: _value,
interval: 20,
showLabels: true,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
);
}
Output
Check the below links for more features in Syncfusion® Flutter Sliders,
Live samples,
Conclusion
I hope you enjoyed learning about how to create a Flutter Slider with labels.
You can refer to our Flutter Slider feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Slider documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
