Range Slider renders incorrectly

[einarsvan]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.3-1.4

Bug summary

When the range slider has values over 100 (the default) it will begin to render incorrectly. Specifically the left pos of <span class="color", will get a large negative value, making it break out of any container.

Specifics

See: https://uui.umbraco.com/?path=/story/uui-range-slider--aaa-overview&args=minGap:0;valueLow:1990;valueHigh:2000;min:1900;max:2023

The issue occurs in the set valueLow function.

On load, this function will never receive the correct high value for range slider, meaning it will end up setting a low value of 100 - this.step. This would usually be 99.
As the min value for the slider is much higher than 99 (for instance 1900), the left position of the thumb becomes a large negative number (eg -1400%).

The layout corrects itself if you change the valueLow after load, as it now will have the correct valueLow (eg 1991).

Steps to reproduce

Visit: https://uui.umbraco.com/?path=/story/uui-range-slider--aaa-overview&args=minGap:0;valueLow:1990;valueHigh:2000;min:1900;max:2023

Expected result / actual result

No response

[einarsvan]

Moving the setters for valueHigh and valueLow into updated fixes the issue. Is there any reason for using custom setters for valueLow and valueHigh? It does cause the component to rerender quite alot, which can become expensive.

Quick thoughts:

@property({ type: Number, attribute: 'value-low' })
  valueLow = 0;
  
  @property({ type: Number, attribute: 'value-high' })
  valueHigh = 0;

...

updated(changedProperties: Map<string | number | symbol, unknown>) {
    super.updated(changedProperties);
    this._trackWidth = this._outerTrack.offsetWidth;

    // Validate high and low values
    this._validateValues();

    this._fillColor();
  }

...

private _validateValues() {
    console.log('Validating values low/high: ', this.valueLow, this.valueHigh);

    if (this.valueLow < this.min) {
      console.log('Low value is too low');
      this.valueLow = this.min;
    }
    if (this.valueLow > this.valueHigh - this.step) {
      console.log('Low value is too high');
      this.valueLow = this.valueHigh - this.step;
    }
    
    if (this.valueHigh > this.max) {
      console.log('High value is too high');
      this.valueHigh = this.max;
    }
    if (this.valueHigh < this.valueLow + this.step) {
      console.log('High value is too low');
      this.valueHigh = this.valueLow + this.step;
    }

    this.valueHigh = this._validateHighByMaxGap(this.valueHigh);
    this.valueHigh = this._validateHighByMinGap(this.valueHigh);
    this.valueLow = this._validateLowByMaxGap(this.valueLow);
    this.valueLow = this._validateLowByMinGap(this.valueLow);
  }