onLabelCreated property

RangeSliderLabelCreatedCallback? onLabelCreated
final

Signature for customizing the label text and style of numeric or date values in the SfRangeSlider.

  • The actual value without formatting is given by actualValue. It is either DateTime or double based on given values.
  • The formatted value based on the numeric or date format is given by formattedText.
  • Text styles can be applied to individual labels using the textStyle property.

This snippet shows how to format and style labels in SfRangeSlider.

SfRangeValues _values = const SfRangeValues(3.0, 7.0);

SfRangeSlider(
  min: 0,
  max: 8,
  values: _values,
  interval: 1,
  showLabels: true,
  onChanged: (SfRangeValues newValues) {
    setState(() {
      _values = newValues;
    });
  },
  onLabelCreated: (
    dynamic actualValue,
    String formattedText,
    TextStyle textStyle,
  ) {
    final int value = actualValue.toInt();
    final int startIndex = _values.start.toInt();
    final int endIndex = _values.end.toInt();
    return RangeSliderLabel(
      text: value == startIndex || value == endIndex
          ? '$formattedText'
          : '$actualValue',
      textStyle: value == startIndex || value == endIndex
          ? const TextStyle(
              color: Colors.blue,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            )
          : textStyle,
    );
  },
)

Implementation

final RangeSliderLabelCreatedCallback? onLabelCreated;