[slider] Arbitrarily restrict the possible values of the slider

[mj12albert]

Currently the marks and step props are 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

Search keywords:

[oliviertassinari]

However it doesn't make sense to have marks, which should be only about the visual marks, dictate the step.

I don't understand why it doesn't make sense. I see marks like legends, they can help people know where they are, e.g. https://mui.com/material-ui/react-slider/#custom-marks. It feels like the same use case as in https://mui.com/x/react-charts/scatter/#grid.

What do the Google Analytics events between the two demos in https://mui.com/base-ui/react-slider/#discrete-sliders say?

[mj12albert]

I don't understand why it doesn't make sense

Sorry I worded it in a confusing way, I meant: it doesn't make sense to have marks dictate the step.

We discussed this and decided that marks should not override/control the step, they should just be visual