Can slider tracking animation be disabled?

Question

MUI has a slider component: https://mui.com/material-ui/react-slider/

I'm trying to figure out how to disable the animation that plays on a small block to move it to a new position so that it moves immediately. Is there any way to do this?

Answer 1

You need to use the style utility to turn off the transition attribute of the slider's thumb and track elements:

import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';

const CustomSlider = styled(Slider)(({ theme }) => ({
  "& .MuiSlider-thumb": {
    transition: 'none'
  },
  "& .MuiSlider-track": {
    transition: 'none'
  },
}));