onLabelCreated property

SliderLabelCreatedCallback? onLabelCreated
final

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

  • The actual value without formatting is given by actualValue. It is either DateTime or double based on given value.
  • 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 SfSlider.

double _value = 4.0;

SfSlider(
  min: 0,
  max: 8,
  value: _value,
  showLabels: true,
  interval: 1,
  onChanged: (dynamic value) {
    setState(() {
      _value = value;
    });
  },
  onLabelCreated: (
    dynamic actualValue,
    String formattedText,
    TextStyle textStyle,
  ) {
    return SliderLabel(
      text: actualValue == _value.toInt()
          ? '$formattedText'
          : '$actualValue',
      textStyle: actualValue == _value.toInt()
          ? const TextStyle(
              color: Color.fromARGB(255, 243, 33, 229),
              fontSize: 18,
              fontWeight: FontWeight.bold,
            )
          : textStyle,
    );
  },
)

Implementation

final SliderLabelCreatedCallback? onLabelCreated;