Repository: ionic-team/ionic-framework
File: core/src/components/range/range.tsx (TypeScript)

Code before:
  }

  /**
   * the value of the range.
   */
  @Prop({ mutable: true }) value: RangeValue = 0;
  @Watch('value')
  protected valueChanged(newValue: RangeValue, oldValue: RangeValue) {
    const valuesChanged = this.areValuesDifferent(newValue, oldValue);
    if (valuesChanged) {
      this.ionInput.emit({ value: this.value });
    }

    if (!this.noUpdate) {
      this.updateRatio();
    }
  }

  /**
   * Compares two RangeValue inputs to determine if they are different.
   *
   * @param newVal - The new value.
   * @param oldVal - The old value.
   * @returns `true` if the values are different, `false` otherwise.
   */
  private areValuesDifferent = (newVal: RangeValue, oldVal: RangeValue) => {
    if (typeof newVal === 'object' && typeof oldVal === 'object') {
      return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
    }

    return newVal !== oldVal;
  };

  private clampBounds = (value: any): number => {
    return clamp(this.min, value, this.max);
  };

  private ensureValueInBounds = (value: any) => {
    if (this.dualKnobs) {
      return {
        lower: this.clampBounds(value.lower),
        upper: this.clampBounds(value.upper),
      };
    } else {
      return this.clampBounds(value);
    }
  };

  /**
   * Where to place the label relative to the range.
   * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.

Review comment (suggestion):
```suggestion
  private compareValues = (newVal: RangeValue, oldVal: RangeValue) => {
```

Nit: can we name this something else? We don't have any other functions that begin with `are`.

Select uses a similar function here: https://github.com/ionic-team/ionic-framework/blob/9e11fcb2bb504916a1ef910a011f80b93be36109/core/src/utils/forms/compare-with-utils.ts#L10

Code after:
  }

  /**
   * the value of the range.
   */
  @Prop({ mutable: true }) value: RangeValue = 0;
  @Watch('value')
  protected valueChanged(newValue: RangeValue, oldValue: RangeValue) {
    const valuesChanged = this.compareValues(newValue, oldValue);
    if (valuesChanged) {
      this.ionInput.emit({ value: this.value });
    }

    if (!this.noUpdate) {
      this.updateRatio();
    }
  }

  /**
   * Compares two RangeValue inputs to determine if they are different.
   *
   * @param newVal - The new value.
   * @param oldVal - The old value.
   * @returns `true` if the values are different, `false` otherwise.
   */
  private compareValues = (newVal: RangeValue, oldVal: RangeValue) => {
    if (typeof newVal === 'object' && typeof oldVal === 'object') {
      return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
    }

    return newVal !== oldVal;
  };

  private clampBounds = (value: any): number => {
    return clamp(this.min, value, this.max);
  };

  private ensureValueInBounds = (value: any) => {
    if (this.dualKnobs) {
      return {
        lower: this.clampBounds(value.lower),
        upper: this.clampBounds(value.upper),
      };
    } else {
      return this.clampBounds(value);
    }
  };

  /**
   * Where to place the label relative to the range.
   * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.