[EuiDualRange] Additional inline margin added for long labels

[Kikky]

Version: 29.3.0

With this code I get 2 range elements with different widths, because of additional inline margin to div.euiRangeTrack (margin-left: 0.8em; for first range element).

const [leverageRangeVal, setLeverageRangeVal] = useState<[number, number]>([30, 3000]);

  const [yearRangeVal, setYearRangeVal] = useState<[number, number]>([1974, 2020]);
  
  const onYearRangeChange = (value: React.SetStateAction<[number, number]>) => {
    setYearRangeVal(value);
  };

  const onLeverageRangeChange = (value: React.SetStateAction<[number, number]>) => {
    setLeverageRangeVal(value);
  };

<EuiPanel>
    <EuiFormRow label="Год основания:" display="rowCompressed">
      <EuiDualRange
        min={1974}
        max={2020}
        showTicks
        tickInterval={20}
        fullWidth
        onChange={onYearRangeChange}
        value={yearRangeVal}
      />
      </EuiFormRow>

      <EuiFormRow label="Кредитное плечо:" display="rowCompressed">
      <EuiDualRange
        min={30}
        max={3000}
        showTicks
        fullWidth
        tickInterval={800}
        value={leverageRangeVal}
        onChange={onLeverageRangeChange}
      />
      </EuiFormRow>
  </EuiPanel>

If I set the values from 0 to 100 like in tutorial - everything is fine and no additional inline margins appear.

is it a bug or I don't understand something? Thanks in advance.

[thompsongl]

Thanks, @Kikky

The extra margin is added in this case because of the length of the labels, but I agree that the outcome does not meet expectations. We'll likely need to look at alternative methods for adjusting label location.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[thompsongl]

@miukimiu Maybe keep this in mind when you look into EuiDualRange adjustments for the time slider.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[thompsongl]

Resolved by #4781