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

Question

我有一个反应组件：

<input type="range" />

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

我想对其进行样式设置，使其看起来像这样：

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

标签： htmlcssreactjs

Answer 1

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

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

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