Slider custom thumb

[VijayakumarMariappan]

Hi alpitebiztrait,

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.

Hey thanks for this but how can I also implement the custom thumb widget now?

Originally posted by @vinayOB in #518