I've just started learning React and already found my first issue that I'm trying to fix for a couple of hours.

I have a Slider (Material-UI) that I'd like to animate value changing. Right now when I click on a button slider changes the value immediately:

Here is my code:

import React from "react";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";
import Button from "@material-ui/core/Button";

class DiscreteSlider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 20
    };
  }

  updateValue = (event, newValue) => {
    //console.log(newValue);
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <Typography id="discrete-slider" gutterBottom>
          Temperature
        </Typography>
        <Slider
          value={this.state.value}
          valueLabelDisplay="auto"
          step={1}
          min={0}
          max={100}
          onChange={this.updateValue}
        />
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            this.setState({ value: 90 });
          }}
        >
          Set to 90
        </Button>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => {
            this.setState({ value: 10 });
          }}
        >
          Set to 10
        </Button>
      </div>
    );
  }
}

export default DiscreteSlider;

and here is an online demo showing it:

How can I animate (tween) value changing? Ideally, I'd like to have a smooth transition between the current and target value, similar to this: /

I've just started learning React and already found my first issue that I'm trying to fix for a couple of hours.

I have a Slider (Material-UI) that I'd like to animate value changing. Right now when I click on a button slider changes the value immediately:

Here is my code:

import React from "react";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";
import Button from "@material-ui/core/Button";

class DiscreteSlider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 20
    };
  }

  updateValue = (event, newValue) => {
    //console.log(newValue);
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <Typography id="discrete-slider" gutterBottom>
          Temperature
        </Typography>
        <Slider
          value={this.state.value}
          valueLabelDisplay="auto"
          step={1}
          min={0}
          max={100}
          onChange={this.updateValue}
        />
        <Button
          variant="contained"
          color="primary"
          onClick={() => {
            this.setState({ value: 90 });
          }}
        >
          Set to 90
        </Button>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => {
            this.setState({ value: 10 });
          }}
        >
          Set to 10
        </Button>
      </div>
    );
  }
}

export default DiscreteSlider;

and here is an online demo showing it: https://codesandbox.io/s/material-demo-6z971

How can I animate (tween) value changing? Ideally, I'd like to have a smooth transition between the current and target value, similar to this: http://jsfiddle/wkQ8y/8/

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Sep 16, 2019 at 12:16 MisiuMisiu 4,9192222 gold badges100100 silver badges209209 bronze badges 2

• Check this - reactmunity/react-transition-group/css-transition. It may help you. – ravibagul91 Commented Sep 16, 2019 at 12:24
• @ravibagul91 I'm trying to tween state value, Link You provided is about CSS. I don't know how to use it with Material UI slider – Misiu Commented Sep 16, 2019 at 12:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can achieve this with a simple CSS property on the Slider Thumb. As the library does not provide any animation features internally, we can make use of the changing CSS properties to animate.

The thumb changes its position by changing the left property. Lets try to animate on this and see. Add the below css code and try it out

.MuiSlider-thumb:not(.MuiSlider-active) {
  transition: left 1s ease-in;
}

.MuiSlider-track {
  transition: width 1s ease-in;
}

Also this forked link shows the changes https://codesandbox.io/s/material-slider-demo-with-animation-45rei

You can use CSS transitions to achieve animation:

  /* Adds CSS3 animation */
  .MuiSlider-thumb {
    transition: left 0.5s;
  }

  /* This is needed. Without it drag and drop with a mouse looks very weird */
  .MuiSlider-thumb.MuiSlider-active {
    transition: left 0s;
  }

  /* Animating track with CSS3 as well */
  .MuiSlider-track {
    transition: width 0.5s;
  }

The only problem with this approach: Material's Slider does not mark track with active class as it does with thumb. So track changes are slightly delayed while changing slider's value directly with mouse.