Question

我在网站上使用了有角度的材料，效果很好，但是当我在移动设备上使用时，会遇到一个问题，例如当我向下滚动时，我会错误地触碰到垫子范围滑块，原因是如果不这样做，我的愤怒就会改变想要

因此，我想要一个解决方案，例如当用户拖动Mat-slider的手柄而不是单击滑块时，只需要更改mat-slider的值即可。

Answer 1

这是一种解决方法，甚至与正常解决方案也不相近。

您可以有条件地隐藏滑块的“范围线”部分，并且仍然仅显示处理程序（仍然可以使用）。

在您的脚本中：

::ng-deep {
  .mat-slider {
    height: 0;
    padding: 0;

  .mat-slider-track-wrapper {
    display: none;
    height: 0;
  }

}

Answer 2

有一个 CSS 解决方案，也解决了 Angular 的问题。它禁用了点击滑块本身的能力，但允许点击拇指/手柄：

input[type="range"]{
  pointer-events:none;
}
input[type="range"]::-webkit-slider-thumb {
  pointer-events:all;
}
input[type="range"]::-moz-range-thumb {
  pointer-events:all;
}
input[type="range"]::-ms-thumb {
  pointer-events:all;
}

相关答案在这里：How to make HTML range input's to work only on sliding?

移动设备中的<mat-slider>触摸问题

2 个答案: