并且“设计”滑块的“标记”值将覆盖

Question

试图在滑块中添加3个标记值，但由于文本太近而使其覆盖标签。

代码为：

const marks = {
  0: '0°C',
  0.1: '26°C',
  20: '37°C',
  20.01: '37°C',
  100: '37°C',
};

和render（）

<Slider marks={marks} step={null} defaultValue={37} />

检查此屏幕截图：：：：

Answer 1

这很正常。范围宽，差异小。 不仅仅是标记相关的问题-活动区域（句柄）也重叠。

您期待什么？里面没有魔术或人工智能。

您只有几种方法可以解决此问题。

使用css / styles制作纯色背景（如果需要，还可以添加边框）-放置得太近的标记将被堆叠-一个可见且覆盖其他标记（可见的边界将成为堆叠指示器）。

>

使用动态范围（如果可能）。我不相信这个值范围（在实践中）。范围的最小值/最大值不必是值的最小值/最大值-您可以根据最小值/最大值和一些（百分比）边距（不留标记末尾）来计算范围。

当然您可以编写过滤器以从可见集中删除一些重叠值。

挖掘源代码，创建并创建自己的自定义解决方案。

更新：

在某些情况下（简单），可以添加一些 “定位逻辑” 。应该可以为某些值准备“位置修饰符”。

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'
};

编写一些“过滤器”以将样式添加到碰撞值。并非在所有条件下都能完美运行，但足以“添加3分”。