How to Add Labels on Top of the Flutter Range Slider?
Using Flutter Range Slider, you can add labels on the top by following the below steps.
Step 1: Add Syncfusion® Flutter Sliders packages to your dependencies in pubspec.yaml file.
Step 2: Initialize the SfRangeSlider widget as a child of any widget. Now, set the values for the SfRangeSlider.min and SfRangeSlider.max properties. The value of the SfRangeSlider.values property should be given within the min and max values. Then, set the SfRangeSlider.interval property which is mandatory to show the labels. Also, set the SfRangeSlider.showLabels property to true.
Step 3: While interacting with the thumbs, the range slider passes the new value to the SfRangeSlider.onChanged callback but does not change its state until the parent widget rebuilds the range slider with new value.
SfRangeValues _values = SfRangeValues(4.0, 8.0);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRangeSlider(
min: 2.0,
max: 10.0,
values: _values,
interval: 2,
showLabels: true,
onChanged: (dynamic newValue) {
setState(() {
_values = newValue;
});
},
),
),
);
}
Step 4: Now wrap the SfRangeSlider widget inside the SfRangeSliderTheme widget. Then, set the SfRangeSliderThemeData to the SfRangeSliderTheme.data property. Pass the necessary offset value to the SfRangeSliderThemeData.labelOffset property to position the labels on the top.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRangeSliderTheme(
data: SfRangeSliderThemeData(
labelOffset: Offset(0.0, -35.0),
),
child: SfRangeSlider(
min: 2.0,
max: 10.0,
values: _values,
interval: 2,
showLabels: true,
onChanged: (dynamic newValue) {
setState(() {
_values = newValue;
});
},
),
),
),
);
}
Thus, using the Syncfusion® Flutter Sliders, we have added the labels on the top.
Output
Check the below links for more features in Syncfusion® Flutter Sliders,
Live samples,
Conclusion
I hope you enjoyed learning how to add labels on top of the Flutter Range Slider.
You can refer to our Flutter Range Slider feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter Range Slider example 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!
