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

[sfHariHaraSudhan]

Hi VinayOB,

We would like to let you know that we can customize the thumb of the SfRangeSlider using the thumbShape property. We have published a knowledge base article that explains how to do this. You can find it at the following link:

How to Draw Custom Thumb in Flutter Range Slider.

By referring this article, you'll be able to customize the thumb in SfRangeSlider to suit your needs.

Additionally, shared the sample browser link below for your reference, which includes multiple examples of thumb shape customizations for the SfRangeSlider.

Range Slider Thumb Shape Customization.

If you have further queries, please feel free to reach out.

Best regards,
Hari Hara Sudhan. K.