How to add label for current value in Flutter Range Slider?
In Flutter Range Slider, you can add a label for the current value by following these steps.
Step 1: Add the Syncfusion® Flutter Sliders package to your dependencies in the 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 values of the SfRangeSlider.values property should be between the min and max values. You can customize the thumb using the SfRangeSlider.thumbShape property of SfRangeSlider.
SfRangeValues _values = SfRangeValues(1500.0, 3000.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SfRangeSlider(
min: 0,
max: 5000,
stepSize: 10,
thumbShape: _CustomThumb(
textScaleFactor: MediaQuery.of(context).textScaleFactor,
values: _values),
values: _values,
onChanged: (dynamic newValue) {
setState(() {
_values = newValue;
});
},
),
);
}
Step 3: To customize the thumb, extend the SfThumbShape class to create a custom shape. Override the paint method and draw a shape that you want. After drawing a thumb shape in the paint, you can convert the current values to the string and layout the text using TextPainter class, as shown in the following code sample.
class _CustomThumb extends SfThumbShape {
_CustomThumb({required this.textScaleFactor, required this.values})
: _textSpan = TextSpan(),
_textPainter = TextPainter();
final double textScaleFactor;
final SfRangeValues values;
TextPainter _textPainter;
TextSpan _textSpan;
final double verticalSpacing = 5.0;
@override
Size getPreferredSize(SfSliderThemeData themeData) {
_textSpan = TextSpan(text: values.start.toInt().toString());
_textPainter
..text = _textSpan
..textDirection = TextDirection.ltr
..textScaleFactor = textScaleFactor
..layout();
// Considered label height along with thumb radius to avoid the
// label get overlapping with adjacent widget.
return Size(themeData.thumbRadius * 2,
(themeData.thumbRadius + _textPainter.height + verticalSpacing) * 2);
}
@override
void paint(PaintingContext context, Offset center,
{required RenderBox parentBox,
required RenderBox? child,
required SfSliderThemeData themeData,
SfRangeValues? currentValues,
dynamic currentValue,
required Paint? paint,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required SfThumb? thumb}) {
paint ??= Paint()..color = themeData.thumbColor!;
context.canvas.drawCircle(center, themeData.thumbRadius, paint);
String text = currentValues!.end.toInt().toString();
if (thumb != null) {
text = (thumb == SfThumb.start ? currentValues.start : currentValues.end)
.toInt()
.toString();
}
_textSpan = TextSpan(
text: text,
style: TextStyle(color: Colors.black),
);
_textPainter
..text = _textSpan
..textDirection = textDirection
..textScaleFactor = textScaleFactor
..layout()
..paint(
context.canvas,
// To show the label below the thumb, we had added it with thumb radius
// and constant vertical spacing.
Offset(center.dx - _textPainter.width / 2,
center.dy + verticalSpacing + themeData.thumbRadius),
);
}
}
Output
Check the following links for more features in Syncfusion® Flutter Sliders:
Live samples
Conclusion
I hope you enjoyed learning about how to add label for current value in Flutter Range Slider.
You can refer to our Flutter Range Slider feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Range 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!
