Category / Section
How to customize label's text in Flutter Slider?
1 min read
In Flutter Slider, you can customize the label text by following these steps:
Step 1: Add the Syncfusion® Flutter Sliders package to your dependencies in the pubspec.yaml file.
Step 2: Initialize the SfSlider widget as a child of any widget. Now, set the values for the SfSlider.min and SfSlider.max properties. The value of the SfSlider.value property should be between the min and max values. Then, set the SfSlider.interval property, which is mandatory to show the labels. Also, set the SfSlider.showLabels property to true. You can customize the label text using the labelFormatterCallback.
double _value = 40.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SfSlider(
min: 0,
max: 100,
showLabels: true,
showDividers: true,
interval: 20,
value: _value,
labelPlacement: LabelPlacement.betweenTicks,
labelFormatterCallback:
(dynamic actualValue, String formattedText) {
switch (actualValue) {
case 0:
return 'Low';
case 20:
return 'Medium';
case 40:
return 'High';
case 60:
return 'Very High';
case 80:
return 'Extreme';
}
return actualValue.toString();
},
onChanged: (dynamic newValue) {
setState(
() {
_value = newValue;
},
);
},
),
),
);
}
Output
Check the following links for more features in Syncfusion® Flutter Sliders:
Live samples
