Creating onChange function for Range Slider in React.js

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;

@SatishPai Looks like this person has a history of not accepting answers. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 11, 2020 at 18:12
@PraveenKumarPurushothaman atleast a comment from the guy would have been enough :) — Sats
– Sats, Commented Dec 12, 2020 at 5:27

Sats · Accepted Answer · 2020-12-03 06:24:28Z

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

edited Dec 3, 2020 at 6:24

answered Dec 3, 2020 at 6:15

Sats

1,9711 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating onChange function for Range Slider in React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related