As mentioned on #4815 as a known issue, the Eui(Dual)Range levels are not being positioned correctly.
As we can notice on a old version, 31.9.0 (CodeSandbox), the ticks and levels don't quite match:
We fixed the ticks and updated the styles for Amsterdam but in our latest version 37.7.0 the levels still not positioning correctly (CodeSandbox)
Expectation
When passing the following levels and tick objects we expect the positions to match.
const levels = [
{
min: 0,
max: 25,
color: "primary"
},
{
min: 25,
max: 50,
color: "success"
},
{
min: 50,
max: 75,
color: "warning"
},
{
min: 75,
max: 100,
color: "danger"
}
]
const ticks = [
{ label: "warning", value: 0 },
{ label: "minor", value: 25 },
{ label: "major", value: 50 },
{ label: "critical", value: 75 }
];
As mentioned on #4815 as a known issue, the Eui(Dual)Range levels are not being positioned correctly.
As we can notice on a old version, 31.9.0 (CodeSandbox), the ticks and levels don't quite match:
We fixed the ticks and updated the styles for Amsterdam but in our latest version 37.7.0 the levels still not positioning correctly (CodeSandbox)
Expectation
When passing the following levels and tick objects we expect the positions to match.