muiSlider restrict for certaing range

user_4579398 0
Viewed 33

i'm usign below Mui Slider component for a UI where i have to restrict it's value for certaing range. For example slider's ball will not dragable after 50. user can select values upto 50 but it will show it full range. i didn't found any direct solution so i figured out a bypass with Discrete Slider Values. here's the code sandbox link ,Where i have make a array of full available values. Is there any neat and clean solution ?

<Slider
  size="small"
  defaultValue={30}
  aria-label="Small"
  valueLabelDisplay="auto"
/>
material-ui reactjs javascript
2 Answers

Hello Fazlay Rabbi it's so simple you need just think out of the box, just need to write simply if condition I write your solution in blow :

import React, { useState } from "react";
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

export default function DiscreteSliderLabel() {
  const [sliderValue, setSliderValue] = useState(0);
  
  const handleChange2 = (event, newValue) => {
   
    if (newValue > 50){
      setSliderValue(50);
    }else{
      setSliderValue(newValue);
    }
    
  };

  return (
    <Box sx={{ width: 300 }}>
      <Slider
        value={sliderValue}
        aria-label="Always visible"
        onChange={handleChange2}
        valueLabelDisplay="on"
      />
    </Box>
  );
}
user_176137380

I think you have to determine max value for yor slider like below

<Slider
   ...
   max={50}
   min={0}
/>

And i see your code and i think you can determine marks array for just labels not all values

user_73873450
Related