title: Creating onChange function for Range Slider in React.js
body: <p>I am trying to fade a text using onChange event of a range slider in react.js.</p>
  <p>As you can see in attached image, for an example, when I click 2(s), the text line of &quot;This is Video Title&quot; should fade out after 2(s) passed.</p>
  <p>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.</p>
  <p>Following are my working files in this regard. And, I kindly request your assistance in this regard. Thank you very much.</p>
  <p>(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.</p>
  <p>In DiscreteSlider.js, I have assigned different values for marks, and please ignore the correspondence of set  values and their labels.)</p>
  <p>App.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import DiscreteSlider from &quot;./DiscreteSlider.js&quot;;
  
  function App() {
    const [time, setTime] = useState(0);
    const [showText, setShowText] = useState(true);
  
    const textFadeOutTimer = (e) =&gt; {
      switch (e.target.value) {
        case &quot;0&quot;:
          setTime(0);
          break;
        case &quot;20&quot;:
          setTime(2000);
          break;
        case &quot;40&quot;:
          setTime(5000);
          break;
        case &quot;70&quot;:
          setTime(7000);
          break;
        case &quot;100&quot;:
          setTime(10000);
          break;
      }
    };
    useEffect(() =&gt; {
      if (time !== 0) {
        const timeout = setTimeout(() =&gt; {
          setShowText(false);
        }, time);
        return () =&gt; clearInterval(timeout);
      }
    }, [time]);
  
    const textFader = () =&gt; {
      setShowText(false);
    };
  
    return (
      &lt;&gt;
        &lt;div className={showText ? &quot;showTextOn&quot; : &quot;showTextOff&quot;}&gt;
          This is Video Title
        &lt;/div&gt;
        
        
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>DiscreteSlider.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Slider from &quot;@material-ui/core/Slider&quot;;
  
  const useStyles = makeStyles({
    root: {
      width: 500,
    },
  });
  
  const marks = [
    {
      value: 0,
      label: &quot;0(s)&quot;,
    },
    {
      value: 20,
      label: &quot;2(s)&quot;,
    },
    {
      value: 40,
      label: &quot;5(s)&quot;,
    },
    {
      value: 70,
      label: &quot;7(s)&quot;,
    },
    {
      value: 100,
      label: &quot;10(s)&quot;,
    },
  ];
  
  function DiscreteSlider(props) {
    const [value, setValue] = React.useState(0);
    const handleChange = (event, newValue) =&gt; {
      setValue(newValue);
      props.onChange(newValue);
    };
  
    const classes = useStyles();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Slider
          defaultValue={0}
          step={null}
          marks={marks}
          onChange={handleChange}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default DiscreteSlider;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/AKSKF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKSKF.png" alt="enter image description here" /></a></p>