Currently, there is no direct support to show the tooltip at bottom of the range slider. So, we meet your requirement using startThumbIcon and endThumbIcon properties and prepared a sample for your reference.
late SfRangeValues _values;
late NumberFormat _numberFormat;
late TextEditingController _rangeStartController;
late TextEditingController _rangeEndController;
Widget _buildThumbIcon(TextEditingController controller) {
return Transform.translate(
// Here 20 is thumb diameter and 5 is spacing between thumb and text.
offset: const Offset(0, 25),
child: OverflowBox(
maxWidth: 150,
child: TextField(
textAlign: TextAlign.center,
decoration:
const InputDecoration(border: InputBorder.none, isDense: true),
controller: controller,
),
),
);
}
String _getFormattedText(dynamic value) {
return _numberFormat.format(value);
}
@override
void initState() {
_values = const SfRangeValues(3.0, 7.0);
_numberFormat = NumberFormat('#.## €');
_rangeStartController = TextEditingController();
_rangeEndController = TextEditingController();
super.initState();
}
@override
void dispose() {
_rangeStartController.dispose();
_rangeEndController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfRangeSlider(
min: 0.0,
max: 10.0,
startThumbIcon: _buildThumbIcon(_rangeStartController),
endThumbIcon: _buildThumbIcon(_rangeEndController),
values: _values,
onChangeStart: (SfRangeValues newValues) {
_rangeStartController.text = _getFormattedText(newValues.start);
_rangeEndController.text = _getFormattedText(newValues.end);
},
onChanged: (SfRangeValues newValues) {
setState(() {
_rangeStartController.text = _getFormattedText(newValues.start);
_rangeEndController.text = _getFormattedText(newValues.end);
_values = newValues;
});
},
onChangeEnd: (SfRangeValues newValues) {
_rangeStartController.text = "";
_rangeEndController.text = "";
},
),
);
}
We hope that this solution will fulfill your requirement. Kindly let us know if you need further assistance with this.
Regards, Praveen G.
Originally posted by @vinayOB in #518