How can I set null as default value in Slider from Material UI - reactjs

Question

I'm checking the documentation and looks like Slider requires the values to be an integer and also fallback to the first or the last item in case I pass a number that is not in the list of values for the Slider.
I'm creating a component that asks the user to select one of these:
Never | Rarely | Sometimes | Frequently | Almost always | Always
But it doesn't make sense to me to have an initial one selected. The options should show up initially as none of them selected. Is this something that Slider was not created to do? Looks so simple not having a value as default. Am I missing something?
Material UI Slider docs: https://material-ui.com/api/slider/

Answer 1

Currently, it is not possible to have MuiSlider without value. It will pick value from defaultValue or value.
For your use case, in case you need to use Slider component, you need to introduce one more extra value (only for UI sake)
import { Typography, Slider } from "#material-ui/core";
const marks = [
{ label: "None", value: 0 },
{
label: "Never",
value: 1
},
{
label: "Rarely Sometimes",
value: 2
},
{
label: " Frequently",
value: 3
},
{
label: "Almost always",
value: 4
},
{
label: "Always",
value: 5
}
];
export default function DiscreteSlider() {
const [sliderValue, setSliderValue] = useState(marks[0].value);
const onSliderValueChange = (e, val) => {
setSliderValue(val);
};
return (
<div>
<Typography id="discrete-slider" gutterBottom>
Slider
</Typography>
<Slider
aria-labelledby="discrete-slider"
valueLabelDisplay="off"
value={sliderValue}
onChangeCommitted={onSliderValueChange}
marks={marks}
min={0}
max={5}
/>
</div>
);
}
Else you can also check for Rating component available in lab version and map its rating with your selection values.
import Rating from "#material-ui/lab/Rating";
import Typography from "#material-ui/core/Typography";
export default function SimpleRating() {
const [value, setValue] = React.useState(0);
return (
<div>
<Rating
name="simple-controlled"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
/>
</div>
);
}