输入范围 slider 左侧与 slider 右侧的颜色不同，在 React with ref.current.style 中？

Question

我一直在尝试将 input[type='range'] 溢出设置为隐藏，但是因为 input[type='range'] 溢出设置为隐藏它不可能让拇指大几 px 所以我试图实现一些组件本身的逻辑，而不是运气。

密码箱

js：

const Slide3 = (props) => {


  const slider = useRef();

  const min = slider.min;
  const max = slider.max;
  const value = slider.value;

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

    slider.current.oninput = function () {
      slider.current.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%)`;
    };
  }

  return (
    <div className="slide-3">
      <div className="sliders-container">
        {' '}
        <Slider
          name="Thickness"
          id="thickness-slider"
          min={0.01}
          max={0.1}
          step={0.01}
          refs={slider}
        />
        <Slider name="Length" id="length-slider" min={120} max={150} step={1} />
      </div>
    </div>
  );
};

css：

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 600px;
  height: 15px;
  padding: 0;
  border-radius: 20px;
  outline: none;
  cursor: pointer;
  background-color: rgb(220, 220, 220);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 100px;
  /*30x30px adjusted to be same as 28x28px on moz*/
  height: 30px;
  width: 30px;
  border-radius: 100px;
  background: #ffffff;
}

Answer 1

我不确定你到底想做什么。

您可以查看此工具： https://toughengineer.github.io/demo/slider-styler
它生成 CSS 和一点 javascript 来设置<input>范围滑块的样式，并带有进度指示等。

这是一个例子：

 for (let e of document.querySelectorAll('input[type="range"].slider-progress')) { e.style.setProperty('--value', e.value); e.style.setProperty('--min', e.min == ''? '0': e.min); e.style.setProperty('--max', e.max == ''? '100': e.max); e.addEventListener('input', () => e.style.setProperty('--value', e.value)); }

 /*generated with Input range slider CSS style generator (version 20201223) https://toughengineer.github.io/demo/slider-styler*/ input[type=range].styled-slider { height: 2.2em; -webkit-appearance: none; } /*progress support*/ input[type=range].styled-slider.slider-progress { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); } input[type=range].styled-slider:focus { outline: none; } /*webkit*/ input[type=range].styled-slider::-webkit-slider-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5); -webkit-appearance: none; } input[type=range].styled-slider::-webkit-slider-runnable-track { height: 1em; border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; } input[type=range].styled-slider::-webkit-slider-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-webkit-slider-runnable-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-webkit-slider-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-webkit-slider-runnable-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track { background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef; } input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track { background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5; } input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track { background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5; } /*mozilla*/ input[type=range].styled-slider::-moz-range-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; } input[type=range].styled-slider::-moz-range-track { height: max(calc(1em - 1px - 1px),0px); border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; } input[type=range].styled-slider::-moz-range-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-moz-range-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-moz-range-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-moz-range-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-moz-range-track { background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef; } input[type=range].styled-slider.slider-progress:hover::-moz-range-track { background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5; } input[type=range].styled-slider.slider-progress:active::-moz-range-track { background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5; } /*ms*/ input[type=range].styled-slider::-ms-fill-upper { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-fill-lower { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; margin-top: 0; box-sizing: border-box; } input[type=range].styled-slider::-ms-track { height: 1em; border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; box-sizing: border-box; } input[type=range].styled-slider::-ms-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-ms-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-ms-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-ms-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-ms-fill-lower { height: max(calc(1em - 1px - 1px),0px); border-radius: 0.5em 0 0 0.5em; margin: -1px 0 -1px -1px; background: #007cf8; border: 1px solid #b2b2b2; border-right-width: 0; } input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower { background: #0061c3; border-color: #9a9a9a; } input[type=range].styled-slider.slider-progress:active::-ms-fill-lower { background: #2f98f9; border-color: #c1c1c1; }

 <input type="range" class="styled-slider slider-progress" style="width: 600px;" />