Tooltip in Flutter Range Slider (SfRangeSlider)

6 Aug 202624 minutes to read

This section explains how to add tooltips to the range slider.

Enable tooltips

You can enable tooltips for both thumbs using the enableTooltip property. It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either numberFormat or dateFormat.

IMPORTANT

By setting the value of shouldAlwaysShowTooltip to true, you can always show a tooltip without having to interact with the range slider thumb. The default value is false and it works independent of the enableTooltip behavior.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 10.0,
      interval: 2,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Range slider tooltip support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 6.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 10.0,
      interval: 2,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Range slider tooltip support

NOTE

Tooltip shape

You can show tooltip in rectangular or paddle shape using the tooltipShape property. The default value of the tooltipShape property is SfRectangularTooltipShape.

NOTE

The paddle tooltip shape is not applicable for vertical orientation of the range sliders.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(40.0, 60.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: 0.0,
      max: 100.0,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      tooltipShape: const SfPaddleTooltipShape(),
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Range slider tooltip shape

Tooltip position

NOTE

This is only applicable for vertical orientation of the range sliders.

You can show tooltip in left or right positions using the tooltipPosition property. The default value of the tooltipPosition property is SliderTooltipPosition.left.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(40.0, 60.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: 0.0,
      max: 100.0,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      tooltipPosition: SliderTooltipPosition.right,
      values: _values,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Range slider tooltip shape

Tooltip text format

By default it is formatted based on numberFormat property and dateFormat property based on whether it is date type SfRangeSlider or numeric SfRangeSlider.

You can format or change the whole tooltip label text using the tooltipTextFormatterCallback. Its arguments are,

  • actualValue – either DateTime or double based on given values.
  • formattedText – If the actual value is double, it is formatted by numberFormat and if the actual value is DateTime, it is formatted by dateFormat.

Horizontal

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = SfRangeValues(
      DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider(
      min: DateTime(2010, 01, 01, 9, 00, 00),
      max: DateTime(2010, 01, 01, 21, 05, 00),
      values: _values,
      interval: 3,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      dateFormat: DateFormat('h:mm'),
      dateIntervalType: DateIntervalType.hours,
      tooltipTextFormatterCallback:
          (dynamic actualValue, String formattedText) {
        return DateFormat('h:mm a').format(actualValue);
      },
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Tooltip formatter support

Vertical

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = SfRangeValues(
      DateTime(2010, 01, 01, 12, 00, 00), DateTime(2010, 01, 01, 18, 00, 00));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSlider.vertical(
      min: DateTime(2010, 01, 01, 9, 00, 00),
      max: DateTime(2010, 01, 01, 21, 05, 00),
      values: _values,
      interval: 3,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      dateFormat: DateFormat('h:mm'),
      dateIntervalType: DateIntervalType.hours,
      tooltipTextFormatterCallback:
          (dynamic actualValue, String formattedText) {
        return DateFormat('h:mm a').format(actualValue);
      },
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ))));
  }
}

Tooltip formatter support

Tooltip color

You can change the background color of the tooltip in the range slider using the tooltipBackgroundColor property.

NOTE

You must import the theme.dart library from the Core package to use SfRangeSliderTheme. This applies to all the remaining code examples in this section that use SfRangeSliderThemeData.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipBackgroundColor: Colors.red[300],
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip color support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipBackgroundColor: Colors.red[300],
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip color support

Tooltip label style

You can change the appearance of the tooltip text in the range slider using the tooltipTextStyle property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipTextStyle: const TextStyle(
            color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic),
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip style support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        tooltipTextStyle: const TextStyle(
            color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic),
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip style support

Tooltip overlap stroke color

You can change the overlap stroke color of the tooltip in the range slider using the overlappingTooltipStrokeColor property.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingTooltipStrokeColor: Colors.white,
      ),
      child: SfRangeSlider(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip overlap support

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SfRangeValues _values = const SfRangeValues(4.0, 8.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: SfRangeSliderTheme(
      data: SfRangeSliderThemeData(
        overlappingTooltipStrokeColor: Colors.white,
      ),
      child: SfRangeSlider.vertical(
        min: 2.0,
        max: 10.0,
        interval: 1,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    ))));
  }
}

Tooltip overlap support