Revision history [back]

To update a RangeSlider with Flutter's ValueListenableBuilder, you can follow these steps:

1. Create two ValueNotifier objects to hold the values of the minimum and maximum slider values:

ValueNotifier<double> _minValue = ValueNotifier<double>(0.0);
ValueNotifier<double>_maxValue = ValueNotifier<double>(100.0);

1. Set the initial values of the RangeSlider using these ValueNotifier objects:

RangeSlider(
  min: 0.0,
  max: 100.0,
  values: RangeValues(_minValue.value, _maxValue.value),
  onChanged: (RangeValues values) {
    _minValue.value = values.start;
    _maxValue.value = values.end;
  },
),

1. Wrap the RangeSlider widget with a ValueListenableBuilder:

ValueListenableBuilder(
  valueListenable: _minValue,
  builder: (BuildContext context, double minValue, Widget child) {
    return RangeSlider(
      min: 0.0,
      max: 100.0,
      values: RangeValues(minValue, _maxValue.value),
      onChanged: (RangeValues values) {
        _minValue.value = values.start;
        _maxValue.value = values.end;
      },
    );
  },
),

1. Repeat the same for the maximum ValueNotifier:

ValueListenableBuilder(
  valueListenable: _maxValue,
  builder: (BuildContext context, double maxValue, Widget child) {
    return RangeSlider(
      min: 0.0,
      max: 100.0,
      values: RangeValues(_minValue.value, maxValue),
      onChanged: (RangeValues values) {
        _minValue.value = values.start;
        _maxValue.value = values.end;
      },
    );
  },
),

With these steps, the RangeSlider will be updated whenever the values of the corresponding ValueNotifier objects change.