And Design slider Mark values overrides - reactjs

Question

trying to add 3 marks value in slider , but its override label because of too close text.
code is:
const marks = {
0: '0°C',
0.1: '26°C',
20: '37°C',
20.01: '37°C',
100: '37°C',
};
and render()
<Slider marks={marks} step={null} defaultValue={37} />
check this screenshot::::

Answer 1

This is normal. Range is to wide, differences are to small. It's not only marks related problem - active areas (handles) are overlapping, too.
What are you expecting? There is no magic or AI inside.
You have only a few ways to handle this problem.
Use css/styling to make solid backgrounds (and borders if you want) - marks placed too close will be stacked - one visible and others covered (visible borders will be stacking indicators).
Use dynamic ranges if possible. I don't belive in this range of values (in practice). Min/max of range doesn't have to be min/max of values - you can calculate range from min/max values and some (percent) margin (leave ends unmarked).
Of course you can write filter for removing some of overlapping values from the visible set.
Dig into sources, fork and create own, customized solution.
UPDATE:
In some cases (simple) it can be possible to add some 'positioning logic'. It should be possible to prepare 'position modifiers' for some values.
const marks = {
0: '0°C',
0.1: {
style: {
transform: translate(20px);
},
label: '0.1°C',
},
26: '26°C',
36.9: {
style: {
transform: translate(-25px);
},
label: '36.9°C',
},
37: '37°C',
37.1: {
style: {
transform: translate(25px);
},
label: '37.1°C',
},
100: '100°C'
};
Write some 'filter' to add styles to colliding values. It wouldn't be perfectly working in every conditions but it can be enough for "add 3 marks".