Obx does not update RangeSlider GetX

Question

Declared out of Widget build scope:

Rx<RangeValues> values = RangeValues(MIN_USD_AMOUNT, MAX_USD_AMOUNT).obs;
Rx<RangeLabels> labels = RangeLabels(MIN_USD_AMOUNT.toString(), MAX_USD_AMOUNT.toString()).obs;

this is in the Container in Scaffold:

Obx(() => RangeSlider(
                divisions: 5,
                activeColor: Colors.red[700],
                inactiveColor: Colors.red[300],
                max: MAX_USD_AMOUNT,
                min: MIN_USD_AMOUNT,
                values: values.value,
                labels: labels.value,
                onChanged: (value) {
                  print("START: ${value.start}, End: ${value.end}");
                  this.values = values;
                  this.labels = RangeLabels(
                          "${value.start.toInt().toString()} USD",
                          "${value.end.toInt().toString()} USD")
                      .obs;
                })),

My problem: when I change the value of slider I can see that is work in console but the view does not update. The slider is not updating at all.

score 0 · Answer 1 · answered Oct 11 '21 at 18:19

Its probably easier just to update a couple RxStrings inside a regular RangeLabels.

  RxString startLabel = MIN_USD_AMOUNT.toString().obs;
  RxString endLabel = MAX_USD_AMOUNT.toString().obs;

In the onChanged of the slider just update the strings.

  controller.startLabel.value = value.start.toString();
  controller.endLabel.value = value.end.toString();

The whole Obx would look like this, assuming you've defined a controller of your GetX class.

 Obx(
   () => RangeSlider(
     divisions: 5,
     activeColor: Colors.red[700],
     inactiveColor: Colors.red[300],
     min: MIN_USD_AMOUNT,
     max: MAX_USD_AMOUNT,
     values: controller.values.value,
     labels: RangeLabels(
     controller.startLabel.value, controller.endLabel.value),
     onChanged: (value) {
        controller.startLabel.value = value.start.toString();
        controller.endLabel.value = value.end.toString();
        controller.values.value = value;
                },
              ),
            ),

That will update the values in the UI.

Thank you very much. I forgot to reassign the variable with ```value```. — John63s, Oct 11 '21 at 20:58

Obx does not update RangeSlider GetX

1 Answers1