How to show tool tip below the slider and can we change the tool tip UI or customise the tool tip UI?

[alpitebiztrait]

I want to set the tooltip below the slider and also want to change the UI and I want to show like this.
Thank in advance

[PraveenGopalsamy]

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.

[SivaElite]

This looks good but can we display tooltip all the time?

[ghost]

Hi @SivaElite,

Greetings from Syncfusion.

Yes, you can display the tooltip all the time with the help of the shouldAlwaysShowTooltip property in SfSlider.

For more details about tooltip, please refer below user guide.
https://help.syncfusion.com/flutter/slider/tooltip

Regards,
Lokesh Palani.

[vinayOB]

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?

[VijayakumarMariappan]

@vinayOB Created a separate ticket for your query. Please use this link for further tracking: #2282.