React Material-UI animate Slider value change

Question

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.net/wkQ8y/8/

Answer 1

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

Answer 2

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.