屏幕录制从01-18-2023.05.52.41.PM开始。

标记标签上没有任何点击事件。点击发生在滑块上(作为拖动的起始事件)。你是如何得出这是你期望的行为的结论的？你是否对其他UI库进行了基准测试，行为有所不同？

因为它是可点击的，当我将鼠标悬停在上面时，它会变成指针。我希望能够像快速选择一样工作，而不是移动鼠标去找到正确的位置，对于大多数用途来说。
我在noUiSlider中看到了这个功能。

当我点击标记时，我希望滑块的值被设置为与marks数组中的对象中的value完全相等。我认为这只是可拖动区域的一部分，有点奇怪。
例如：marks = [{value:maxVal/4, label:'25%'}, {value:maxVal/2, label:'50%'} ....]
当我点击标记时，我希望得到精确的百分比。点击50%后，值范围从47-53%,这取决于你点击了50%的哪个位置，这是一个奇怪的用户体验！有没有办法我们可以直接将滑块的值设置为marks中传递的值？

我认为相关的代码片段更改可以在这里找到：
https://github.com/mui/material-ui/blob/master/packages/mui-base/src/SliderUnstyled/SliderUnstyled.tsx#L236
我对MUI的内部结构并不熟悉，所以我认为这比活跃的贡献者花费的时间要长得多。然而，这非常烦人，所以如果一段时间内没有被采纳，我可能会回来解决这个问题。

我认为这应该被视为一个错误。实际上，它完全使滑块标记对我的任务(在回放时间轴上显示书签)毫无用处，我无法想象当前行为在任何其他任务中都是可取的。

我可以确认这个问题存在于MUI滑块上，标签应该在点击它们时移动到给定的位置。其他所有库都有类似的实现。

这也是我项目的一个问题。绝对同意，在当前状态下，这些标记除了视觉装饰之外毫无用处。如果用户点击它们，说实话，用户体验比没有它们还要差。如果这个问题不解决，我至少希望有一个切换按钮，使这些标记不可选，纯粹只起到视觉辅助作用。

可以使用以下方法解决：

const ClickableSliderMarkLabel = (props: any) => {
  const { labelOnChange, ownerState, ...restProps } = props;

  const markValue = ownerState?.marks[props?.["data-index"]]?.value;

  const noop = useCallback((e: React.SyntheticEvent) => {
    e.stopPropagation();
  }, []);

  const onClick = useCallback(
    (e: React.SyntheticEvent) => {
      e.preventDefault();
      e.stopPropagation();

      if (markValue != null) {
        labelOnChange(e, markValue);
      }
    },
    [labelOnChange, markValue],
  );

  return (
    <SliderMarkLabel
      onMouseDown={noop}
      onTouchStart={noop}
      onClick={onClick}
      sx={useMemo(() => ({
        ...props?.sx,
        userSelect: "none",
      }), [props?.sx])}
      ownerState={ownerState}
      {...restProps}
    />
  );
};

export const MySlider = (props: React.ComponentProps<typeof Slider>) => {
  return (
    <Slider
      slotProps={{
        markLabel: {
          // @ts-ignore
          labelOnChange: props.onChange,
        },
      }}
      slots={{
        markLabel: ClickableSliderMarkLabel,
      }}
      {...props}
    />
  );
};