И ползунок Design Mark значения переопределяет

Question

пытается добавить значение 3 метки в слайдере, но его метка переопределения из-за слишком близкого текста.

код:

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

и рендер ()

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

проверить этот скриншот ::::

Answer 1

Это нормально. Диапазон слишком большой, различия малы. Это не только проблема, связанная с отметками - активные области (маркеры) тоже перекрываются.

Чего вы ожидаете?Внутри нет магии или ИИ.

У вас есть только несколько способов справиться с этой проблемой.

Используйте CSS / Styling, чтобы сделать телофоны (и, если хотите, границы) - метки, расположенные слишком близко, будут наложены друг на друга - один видимый, а другие будут закрыты (видимые границы будут индикаторами стека).

Используйте динамические диапазоны , есливозможный.Я не верю в этот диапазон ценностей (на практике).Мин / макс диапазона не обязательно должен быть мин / макс значений - вы можете рассчитать диапазон из мин / макс значений и некоторого (процента) запаса (оставьте концы без отметок).

Конечно выможет написать фильтр для удаления некоторых перекрывающихся значений из видимого набора.

Копаться в источниках, раскошелиться и создать собственное, настраиваемое решение.

ОБНОВЛЕНИЕ:

В некоторых случаях (просто) можно добавить «логика позиционирования» .Должна быть возможность подготовить «модификаторы положения» для некоторых значений.

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 оценки».