values property

SfRangeValues values
final

The values currently selected in the range slider.

The range slider's start and end thumbs are drawn corresponding to these values.

For date values, the range slider doesn’t have auto interval support. So, you may need to set interval, dateIntervalType, and dateFormat for date values, if the labels, ticks, and dividers are needed.

This snippet shows how to create a numeric SfRangeSlider.

SfRangeValues _values = SfRangeValues(4.0, 8.0);

SfRangeSlider(
  min: 0.0,
  max: 10.0,
  values: _values,
  onChanged: (SfRangeValues newValues) {
    setState(() {
      _values = newValues;
    });
   },
)

This snippet shows how to create a date SfRangeSlider.

SfRangeValues _values = SfRangeValues(
       DateTime(2002, 01, 01), DateTime(2003, 01, 01));

SfRangeSlider(
  min: DateTime(2000, 01, 01, 00),
  max: DateTime(2005, 12, 31, 24),
  values: _values,
  interval: 1,
  dateFormat: DateFormat.y(),
  dateIntervalType: DateIntervalType.years,
  onChanged: (SfRangeValues newValues) {
    setState(() {
     _values = newValues;
    });
  },
)

See also:

  • onChanged, to update the visual appearance of the range slider when the user drags the thumb through interaction.
  • showTicks, to render major ticks at given interval.
  • showLabels, to render labels at given interval.

Implementation

final SfRangeValues values;