reactjs - 如何在 React 中制作一个显示增量值的输入 slider ？

Question

我目前有一个带有此代码的输入 slider :

    
                <input
                  id="typeinp"
                  name="height"
                  type="range"
                  min="45"
                  max="80"
                  value={height}
                  valueLabelDisplay="auto"
                  step="1"
                  onChange={(e) => setHeight(e.target.value)}
                  aria-labelledby="discrete-slider-custom"
                  style={sliderStyles}
                />

但它不会在 slider 上显示任何值。所以我的问题是，我怎样才能像在此处完成的那样在我的 slider 上获得这些增量:

我的 slider 目前看起来像这样:

Answer 1

我想我的问题不清楚，因为我是 React 的新手并且没有意识到 react-native 与我所拥有的有所不同。但是，对于可能感兴趣的任何其他人，我能够让 slider 像这样工作:

import Slider from "rc-slider";
import "rc-slider/assets/index.css";

   <Slider
              defaultValue={60}
              min={45}
              max={80}
              step={1}
              onChange={(e) => setHeight(e)}
              marks={heightMarks}
              style={{ width: "100%" }}
            />

还有标记:

  const heightMarks = {
    45: "45",
    50: "50",
    55: "55",
    60: "60",
    65: "65",
    70: "70",
    75: "75",
    80: "80",
  };

并安装:npm i rc-slider