[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: