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"
/>
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
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>
);
}