davidchin/react-input-range

Labels overlapping on big values

andrew-kuzovov opened this issue · 3 comments

kjreyes29 commented

Any fix here?

octocat01 commented

Hi @andrew-kuzovov @kjreyes29
I'm facing the same issue.
any resolution?

german-schneck commented

My solution has been to make both elements invisible and show them only when we position the mouse over each section.

  .input-range__track.input-range__track--background span.input-range__slider-container:nth-child(2) span.input-range__label.input-range__label--value,
  .input-range__track.input-range__track--background span.input-range__slider-container:nth-child(3) span.input-range__label.input-range__label--value {
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }

  .input-range__track.input-range__track--background span.input-range__slider-container:nth-child(2):hover span.input-range__label.input-range__label--value,
  .input-range__track.input-range__track--background span.input-range__slider-container:nth-child(3):hover span.input-range__label.input-range__label--value {
    opacity: 1;
  }
  • 👍1