使输入拇指比其他拇指更大

这里的 React 开发人员试图通过编码来学习，这里我有一个滑块，我试图使拇指变大，但它不会比它所在的输入更大（正如你所看到的，如果我使拇指变大，它不会完全显示它）。关于如何使它看起来像我想要的有什么建议吗？

英语不是我的母语，所以可能会有错误。

这是我的滑块：

我希望它看起来像这样：

我已经做了什么：

https://codesandbox.io/s/tender-architecture-s4we0m?file=/src/styles.css

css:

.App {
  font-family: sans-serif;
  text-align: center;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="range"] {
    overflow: hidden;
    width: 80px;
    /* -webkit-appearance: none; */
    background-color: white;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    /* -webkit-appearance: none; */
    color: #13bba4;
    margin-top: -1px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 10px;
    /* -webkit-appearance: none; */
    height: 20px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #ce7c00;
  }
}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

js:

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { useRef, useState } from "react";
import "./styles.css";
// Style
const MainWrapper = {
  background: "salmon",
  width: "100%",
  height: "100vh",
  position: "relative"
};

const InputWrapper = {
  position: "fixed",
  zIndex: 9999,
  width: "100%"
};

const ScaleIndicator = {
  textAlign: "right",
  position: "absolute",
  right: "40px",
  background: "blue",
  color: "white",
  zIndex: "1000",
  padding: "10px"
};

const Slider = {
  width: "200px",
  margin: "10px 30px"
};

export default function App() {
  const transformComponentRef = useRef(null);
  const [scale, setScale] = useState(0.7);

  const updateScale = (e) => {
    const targetScale = parseFloat(e.target.value);
    const factor = Math.log(targetScale / scale);
    const { zoomIn, zoomOut } = transformComponentRef.current;

    /*
      how react-zoom-pan-pinch calculate new scale :
      targetScale = scale * Math.exp(1 * factor);

      we need factor(step) for zoomIn and zoomOut, just reverse the previous equation to get factor
      factor = Math.log(targetScale / currentScale);
    */
    // console.log(scale * Math.exp(1 * factor), newScale);

    // const targetScale = scale * Math.exp(1 * factor);

    if (targetScale > scale) {
      zoomIn(factor, 0);
    } else {
      zoomOut(-factor, 0);
    }

    setScale(targetScale);
  };

  return (
    <div style={MainWrapper}>
      <h1 style={ScaleIndicator}>{(scale * 100).toFixed(0)}%</h1>
      <div style={InputWrapper}>
        <input
          type="range"
          min="0.1"
          max="1.5"
          step="0.01"
          value={scale}
          onChange={updateScale}
          style={Slider}
        />
      </div>
      <TransformWrapper
        ref={transformComponentRef}
        onZoomStop={(e) => {
          setScale(e.state.scale);
        }}
        initialScale={scale}
        minScale={0.1}
        maxScale={1.5}
        doubleClick={{
          disabled: true
        }}
        // wheel={{
        //   activationKeys: ["z"]
        // }}
        // panning={{
        //   activationKeys: ["x"],
        // }}
        limitToBounds={false}
        zoomAnimation={{ disabled: true }}
        centerOnInit
        onZoom={(e) => {
          setScale(e.state.scale);
        }}
      >
        {({ zoomIn, zoomOut, setTransform, ...rest }) => {
          return (
            <TransformComponent
              wrapperStyle={{
                width: "100%",
                height: "100%"
              }}
            >
              <img
                src="https://images.pexels.com/photos/2450218/pexels-photo-2450218.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                alt="Cool Astro"
              />
            </TransformComponent>
          );
        }}
      </TransformWrapper>
    </div>
  );
}

我提供的那个链接看起来与 Firefox 浏览器完全不同，对此也有想法吗？

设计风格的方法有多种<input type="range" />已经指出的元素here。如果你不关心纯 CSS 解决方案，那么使用 React，你可以简单地利用输入onChange事件 抓取输入元素e.currentTarget并应用必要的样式来更改上面帖子中提到的外观

<input 
  onChange={(e) => {
    updateStyles(e.currentTarget);
  }}
/>

我还建议熟悉useRef & useEffect钩子，这确保样式也应用到初始渲染上。

这是你修改后的example