Marks or Thumb off center

[nickcanarelli]

Description

The actual value on the slider is at the beginning of the thumb and not the center? Seems like an odd user experience to think the center is the value when instead its the beginning of the thumb.

When actually centering the thumb and mark to the appropriate value, there is an excess of track at the end.

Steps to reproduce:

1. Remove:

  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);

from .example-thumb

CodeSandbox

Please provide a CodeSandbox that clearly reproduces the issue. Issues without a CodeSandbox are less likely to get resolved quickly.

[axelboc]

We found this a bit odd as well, but a simple workaround if to add margin to the track (half of the size of the thumb on either side):

.track {
  0 calc(var(--thumb-size) / 2)
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.