使输入拇指比其他拇指大

Question

这里是 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>
  );
}

我提供的 link 看起来与 firefox 浏览器完全不同，我的想法也是如此吗？

Answer 1

能否在您的滑块 class 中尝试此 CSS 代码？我认为它会起作用:)

你也可以使用这个link

https://toughengineer.github.io/demo/slider-styler/slider-styler.html

 input[type=range]::-webkit-slider-thumb {
      cursor: ew-resize;
      background: #434343;
      box-shadow: -100px 0 0 100px #ce7c00;
      -webkit-appearance: none;  
      border: none;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: #434343;
      margin-top: -7px;
    }

Answer 2

对于范围输入的一般样式，请查看这篇很棒的文章 styling cross browser compatible range inputs css

这涵盖了您可以对输入范围执行的大部分操作，并且作者还创建了一个网站来创建输入范围。 range.css - 为您的 HTML5 输入生成样式作者：丹尼尔·斯特恩

为了能够在 Chrome 中更改滑块上下部分的颜色，您必须编写一些 js 代码，为此您可以查看此线程

Answer 3

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

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

我还建议熟悉 useRef 和 useEffect 挂钩，这可确保样式也应用到初始渲染中。

这是您修改后的 example

Answer 4

滑块反应组件。您可以向值、最小值、最大值、双向绑定添加一些道具，以从父组件控制它并改进它。 Sandbox example

There is a problem with thumb. In chrome if you want the thumb to be larger than the track, then the box shadow overlaps the track with the height of the thumb.

Just sumup all these answers and wrote normally working slider with larger slider thumb. Related answer

const Slider = () => {
  const inputRef = useRef();
  const [value, setValue] = useState(25);

  const onChange = (event) => {
    setValue(event.target.checked);
  };

  const initSlider = () => {
    const slider = inputRef.current;
    const min = slider.min;
    const max = slider.max;
    const value = slider.value;

    slider.style.background = `linear-gradient(to right, red 0%, red ${
      ((value - min) / (max - min)) * 100
    }%, #DEE2E6 ${((value - min) / (max - min)) * 100}%, #DEE2E6 100%)`;

    slider.oninput = function () {
      this.style.background = `linear-gradient(to right, red 0%, red ${
        ((this.value - this.min) / (this.max - this.min)) * 100
      }%, #DEE2E6 ${
        ((this.value - this.min) / (this.max - this.min)) * 100
      }%, #DEE2E6 100%)`;
    };
  };

  useEffect(() => {
    initSlider();
  });

  return (
    <input
      ref={inputRef}
      id="slider"
      onChange={onChange}
      type="range"
      min={0}
      defaultValue={value}
      max={100}
    />
  );
};

P.S。也许，有一些错误，因为我以前在 vue.js 上编码。我尽力了）

使输入拇指比其他拇指大

making input thumb bigger than rest

html

javascript

input

reactjs

material-ui