_updateHandlesAndRange(newValue) {
      const max = this._effectiveMax;
      const min = this._effectiveMin;
      const prevStartValue = this.getStoredPropertyState("startValue") || 0;
      const prevEndValue = this.getStoredPropertyState("endValue") || 0;
      const affectedValue = this._valueAffected;
      // The value according to which we update the UI can be either the startValue
      // or the endValue property. It is determined in _getClosestHandle()
      // depending on to which handle is closer the user interaction.
      if (affectedValue === "startValue") {
        this._selectedRange = (prevEndValue - newValue) / (max - min);
        this._firstHandlePositionFromStart = (newValue - min) / (max - min) * 100;
      } else if (affectedValue === "endValue") {
        this._selectedRange = (newValue - prevStartValue) / (max - min);
        this._secondHandlePositionFromStart = (newValue - min) / (max - min) * 100;
      } else {
        // When both values are changed - UI sync or moving the whole selected range:
        this._selectedRange = (this.endValue - this.startValue) / (max - min);
        this._firstHandlePositionFromStart = (this.startValue - min) / (max - min) * 100;
        this._secondHandlePositionFromStart = (this.endValue - min) / (max - min) * 100;
      }
    }
Updates the visual representation of the component by calculating
the styles of the handles and the range selection based on the new state.

@private