类型范围的 React 输入上的自定义样式

Question

我有一个 React 组件：

<input type="range" />

我使用了一些 css 对其进行了垂直转换，现在它看起来像这样：

我想给它设置样式，使它看起来像这样：

我什至如何开始在滑块中使用圆圈选择和线条？ 我是否使用某种 css 伪类？是否可以使用 svg 作为圆选择？

Answer 1

我可能很懒惰，但我看到了 2 种可能的解决方案来重新创建它，因此轴也适合移动设备。我个人会选择第一个。

例如，SVG 可以在 Figma 中轻松创建，并且它会自行响应。您可以将其划分为三个不同的元素并正确设置样式，因此它会处于正确的位置。此外，SVG 可以在 GSAP 或其他此类库中制作精美的动画。

在我看来，另一种方式更冗余，将继续纯粹在 CSS 中使用 ::before、::after 和 svg 图标在中间重新创建，并额外使用绝对定位元素，但它在这种情况下可能无法完全响应。