Reactjs 如何在React中制作显示增量值的输入滑块？

我目前有一个带有以下代码的输入滑块：

    
                <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}
                />

setHeight（e.target.value）}
aria labelledby=“离散滑块自定义”
样式={sliderStyles}
/>

但它不会在滑块上显示任何值。所以我的问题是，我如何在滑块上获得这些增量，就像在这里一样：

---

我的滑块当前看起来是这样的：

我想我的问题不清楚，因为我是新来的react，没有意识到react native与我的有所不同。但是，我能够让滑块像这样为其他可能感兴趣的人工作：

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%" }}
            />

和安装：

npm i rc滑块

---

使用已经存在的组件或计算增量位置并单独显示。是的，使用已经存在的组件。例如：

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