---

const MAX_SCALE_LABELS = 5;

function createYearMarks(minYear: number, maxYear: number): number[] {
  const span = maxYear - minYear;

  if (span <= 0) return [minYear];

  const intervals = Math.min(MAX_SCALE_LABELS - 1, span);

  return Array.from(
    { length: intervals + 1 },
    (_, index) => minYear + Math.floor((span * index) / intervals),
  );
}

















<div className={styles.range_scale}>
  {scaleMarks.map((value, index) => (
    <span
      key={value}
      className={styles.range_scale_label}
      style={{
        left: `${
          scaleMarks.length > 1
            ? (index / (scaleMarks.length - 1)) * 100
            : 0
        }%`,
      }}
    >
      {value}
      {suffix}
    </span>
  ))}
</div>

















  &_scale {
    height: var(--space-1500);
    color: var(--neutral-12);
    font-size: var(--range-value-font-size);
    line-height: var(--space-1000);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
  }

  &_scale_label {
    top: 0;
    width: max-content;
    white-space: nowrap;
    transform: translateX(-50%);

    &:first-child {
      transform: none;
    }

    &:last-child:not(:first-child) {
      transform: translateX(-100%);
    }
  }