在 react js 中创建自定义范围

Question

我正在尝试制作这样的范围选择器，任何人都可以帮忙

import React, { Component } from "react";



const [selectedValue, setSelectedValue] = useState(0);


const handleChange = (e) => {
    setSelectedValue(e.target.value);
  
  };


  render() {
    return (
      <div>
        <input
            onInput={handleChange}
            type="range"
            min="0"
            value={selectedValue}
            max="5"
            step="1"
            list="tick-list"
          />
      </div>
    );
  }
}

我已经管理了这个设计的工作部分，我只想要这样的 cssto

Answer 1

请参阅下面的工作版本。

首先要注意的是，您应该使用反应状态来管理滑块的值 - 无论您希望与它交互的频率如何。

获得十步的好方法是将当前值除以 10，四舍五入到最接近的整数，然后再乘以 10。请注意，您不应改变实际的 sliderValue 变量，而应使用新变量。示例1中使用了这种方法。

const shownValue = Math.round(sliderValue / 10) * 10

如果您只想让滑块大步跳跃（示例 2），那么您只需将滑块输入上的 max 属性设置为 6，然后将结果乘以 10。

const {useState} = React;

const Example1 = () => {
  const [sliderValue, setSliderValue] = useState(0);
  const shownValue = Math.round(sliderValue / 10) * 10
  
     return (
      <div>
        <h3>
        Example 1 - smooth
        </h3>
        <div>
          <input
            type="range"
            name="range"
            id="range"
            min="0"
            max="60"
            value={sliderValue}
            onChange={e => {
            setSliderValue(e.target.value);
            }}
          />
        </div>
        <div>
          {shownValue}
        </div>
      </div>
   );
};

const Example2 = () => {
  const [sliderValue, setSliderValue] = useState(0);
  
     return (
      <div>
        <h3>
        Example 2 - incremental
        </h3>
        <div>
          <input
            type="range"
            name="range"
            id="range"
            min="0"
            max="6"
            value={sliderValue}
            onChange={e => {
            setSliderValue(e.target.value);
            }}
          />
        </div>
        <div>
          {sliderValue * 10}
        </div>
      </div>
   );
};

// Render it
ReactDOM.render(
  <div>
    <Example1 />
    <Example2 />
  </div>,
  document.getElementById("react")
);

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