Creating onChange function for Range Slider in React.js - reactjs

Question

I am trying to fade a text using onChange event of a range slider in react.js.
As you can see in attached image, for an example, when I click 2(s), the text line of "This is Video Title" should fade out after 2(s) passed.
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.)
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;

Answer 1

To fade the text, you can use the opacity style from CSS for HTML element.
Provide the DiscreteSlider component with the event and use that event in the App component.
Create a new state.
const [Opa, setOpa] = useState(0);
created a new method in App component onChangeApp
function onChangeApp(value) {
setOpa(value / 100);
}
return method of App component
return (
<>
<div style={{ opacity: Opa }}>This is Video Title</div>
<DiscreteSlider onChange={onChangeApp} />
</>
);
You can checkout the solution in the stackblitz project i created for this.
https://stackblitz.com/edit/react-fade-element?file=src/App.js