reactjstypescriptslidermui-x

How to disable right slot on MUI range slider?


I am using React MUI Slider Component in my React application.

  import Slider from '@mui/material/Slider';

  const [value, setValue] = React.useState<number[]>([20, 100]);

  const handleChange = (event: Event, newValue: number | number[]) => {
    setValue(newValue as number[]);
  };

   <Slider
      value={value}
      onChange={handleChange}
      valueLabelDisplay="auto"
   />

enter image description here

I want to disable right slot in this slider. How can I achieve this?

I couldn't find an option to disable only one slot in range slider.


Solution

  • I think there is no way to disable right slot using API or other settings. But you can disable programmatically to set always muximum value for right value.

    This is my code and you can check this in codesandbox.

    import Slider from "@mui/material/Slider";
    
    export default function RangeSlider() {
      const [value, setValue] = React.useState<number[]>([20, 100]);
    
      const handleChange = (event: Event, newValue: number | number[]) => {
        const newValues = newValue as number[];
        setValue([newValues[0], 100]);
      };
    
      return (
        <Slider 
           value={value} 
           onChange={handleChange} 
           valueLabelDisplay="auto" 
        />
      );
    }