In @mui/base the marks and step props were used together to restrict the possible values of the slider to some arbitrary numbers like this:
<Slider
marks={[
{ value: 2, label: '2' },
{ value: 3, label: '3' },
{ value: 5, label: '5' },
{ value: 11, label: '11' }
]}
step={null}
/>
(Here is a full demo from the docs)
However it doesn't make sense to have marks, which should be only about the visual marks, dictate the step.
We decided to redesign this feature using the component-per-node API, e.g.:
<Slider.Root defaultValue={5}>
<Slider.Track>
<Slider.Thumb />
<Slider.RestrictedValue value={2} />
<Slider.RestrictedValue value={3} />
<Slider.RestrictedValue value={5} />
<Slider.RestrictedValue value={11} />
</Slider.Track>
</Slider.Root>
- If any
RestrictedValue component is present, the step prop should be ignored
- The
RestrictedValue component could render a span with some minimal positioning styles
In
@mui/basethemarksandstepprops were used together to restrict the possible values of the slider to some arbitrary numbers like this:(Here is a full demo from the docs)
However it doesn't make sense to have
marks, which should be only about the visual marks, dictate the step.We decided to redesign this feature using the component-per-node API, e.g.:
RestrictedValuecomponent is present, thestepprop should be ignoredRestrictedValuecomponent could render a span with some minimal positioning styles