How to create onchange function for range slider in react

See more:

ReactJS

I am a beginner in web development. I have currently engaged in a react project and been trying to fade a text using onChange event of a range slider in react.js.

The Problem is, I can't understand how to link correspondent values of range slider labels as an onChange function to fade the text. (Before, I executed the same objective using button click events, but now I need to do that using a range slider). I hope you can understand my question.

Following are my working files in this regard. And, I kindly request your assistance in this regard. Thank you very much.

(In App.js, I have used Switch case to capture the set time values of 0s, 2s, 5s, 7s and 10s by using their relevant labels. But, I'm not sure whether it is a correct approach. Please consider, App.js is half-completed and that's where I have got stuck for hours.

In DiscreteSlider.js, I have assigned different values for marks, and please ignore the correspondence of set values and their labels.)

What I have tried:

App.js

import React, { useEffect, useState } from "react";
import "./App.css";
import DiscreteSlider from "./DiscreteSlider.js";

function App() {
  const [time, setTime] = useState(0);
  const [showText, setShowText] = useState(true);

  const textFadeOutTimer = (e) => {
    switch (e.target.value) {
      case "0":
        setTime(0);
        break;
      case "20":
        setTime(2000);
        break;
      case "40":
        setTime(5000);
        break;
      case "70":
        setTime(7000);
        break;
      case "100":
        setTime(10000);
        break;
    }
  };
  useEffect(() => {
    if (time !== 0) {
      const timeout = setTimeout(() => {
        setShowText(false);
      }, time);
      return () => clearInterval(timeout);
    }
  }, [time]);

  const textFader = () => {
    setShowText(false);
  };

  return (
    <>
      <div className={showText ? "showTextOn" : "showTextOff"}>
        This is Video Title
      </div>
      
      
    </>
  );
}

export default App;

DiscreteSlider.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";

const useStyles = makeStyles({
  root: {
    width: 500,
  },
});

const marks = [
  {
    value: 0,
    label: "0(s)",
  },
  {
    value: 20,
    label: "2(s)",
  },
  {
    value: 40,
    label: "5(s)",
  },
  {
    value: 70,
    label: "7(s)",
  },
  {
    value: 100,
    label: "10(s)",
  },
];

function DiscreteSlider(props) {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
    props.onChange(newValue);
  };

  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Slider
        defaultValue={0}
        step={null}
        marks={marks}
        onChange={handleChange}
      />
    </div>
  );
}

export default DiscreteSlider;