[slider] Arbitrarily restrict the possible values of the slider

[mj12albert]

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

[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

[Anders2303]

This feature would be very useful for us; we've used the restricted values from MUI-Base, so we cannot fully migrate over without this. Any idea when it migth be available?

[colmtuite]

@Anders2303 Cool to see this project. I'm creating an internal lib and also needed restricted values. We're working on entering beta right now, shipping 3 new components, and also working on combobox + pickers, so it will be difficult to prioritise. But I'll do my best to see if we can fit this in over the next couple months.

[mj12albert]

Discord's settings has examples of this: