在 React 中，如何在范围滑块的拇指上创建一个气泡头

Posted 2023-03-06

【中文标题】在 React 中，如何在范围滑块的拇指上创建一个气泡头

【英文标题】：In React, how to create a bubble head on top of the thumb of a range slider

【发布时间】：2021-10-28 08:29:56

【问题描述】：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerhtml = slider.value;

slider.oninput = function() 
  output.innerHTML = this.value;

.slidecontainer 
  width: 100%;


.slider 
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;


.slider:hover 
  opacity: 1;


.slider::-webkit-slider-thumb 
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;


.slider::-moz-range-thumb 
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;

<h1>Round Range Slider</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" style="width: 200px">
  <p>Value: <span id="demo"></span></p>
</div>

上面的代码是一个用 HTML 制作的范围滑块。

这是它的外观示例。

【参考方案1】：

对于解决方案，首先需要获取输入范围，然后是步长的宽度，因为范围会大于您的最大值，气泡不能以拇指为中心放置。最后乘以 range 和 step 得到气泡位置。使用 svg create bubble 可以更好地创建气泡。用于设置范围输入 link

function App() 
  const [range, setRange] = React.useState(0);
  const [step, setStep] = React.useState(0);
  const ref = React.useRef(null);

  const getRange = (ev) => 
    setRange(ev.target.value);
  ;

  React.useEffect(() => 
    const rangeLinePadding = 16;
    const calcStep =
      (ref.current.offsetWidth - rangeLinePadding) / ref.current.max;
    setStep(calcStep);
  , []);

  return ( <div className="App">
      <h1> Range Slider </h1>
      <div className="slider">
        <input
          type="range"
          id="range"
          min="0"
          max="100"
          value=range
          onChange=getRange
          ref=ref
        />
        <label
          htmlFor="range"
          style=
            transform: `translateX($range * steppx)`,
          >
          <span> range </span>
          <svg viewBox="0 0 15 18">
            <path d="M14,7a7,7,0,0,1-2,4.87L7.72,16.35a1,1,0,0,1-1.44,0L2,11.87A6.93,6.93,0,0,1,0,7,7,7,0,0,1,14,7Z" />
          </svg>
        </label>
      </div>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render( <
  App / > ,
  rootElement
);

.App 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  font-family: sans-serif;
  text-align: center;


.slider 
  width: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 10px;


label[for='range'] 
  width: 35px;
  height: 40px;
  position: absolute;
  top: -45px;
  left: 0;
  color: hsl(0, 0%, 0%);
  pointer-events: none;


label[for='range'] span 
  position: absolute;
  top: 8px;
  left: 50%;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  transform: translateX(-50%);
  z-index: 5;


label[for='range'] svg 
  height: inherit;
  position: relative;
  left: 1px;
  fill: hsl(207, 90%, 77%);
  z-index: -1;
  pointer-events: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>