How to make a input slider in React that shows incremental values?

Question

I currently have an input slider with this code:

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

But it doesn't show any values on the slider. So my question is, how can I get these increments on my slider like they are done here:

My slider currently looks like this:

use already existed component or calculate increments positions and show them separately. — demkovych, Jul 06 '20 at 13:09
yeah, use already existed component. For example: https://material-ui.com/components/slider/#discrete-sliders — Oro, Jul 06 '20 at 13:24

score 2 · Accepted Answer · answered Jul 17 '20 at 21:10

I guess my question was unclear as I am new to react and didn't realize that react-native was something different from what I had. However, I was able to get the slider to work like this for anyone else who might be interested:

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

And the marks:

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

And to install: npm i rc-slider

How to make a input slider in React that shows incremental values?

1 Answers1