-
-
Notifications
You must be signed in to change notification settings - Fork 380
Open
Labels
component: sliderChanges related to the slider component.Changes related to the slider component.type: new featureExpand the scope of the product to solve a new problem.Expand the scope of the product to solve a new problem.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.Waiting for upvotes. Open for community feedback and needs more interest to be worked on.
Description
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
RestrictedValuecomponent is present, thestepprop should be ignored - The
RestrictedValuecomponent could render a span with some minimal positioning styles
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
component: sliderChanges related to the slider component.Changes related to the slider component.type: new featureExpand the scope of the product to solve a new problem.Expand the scope of the product to solve a new problem.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.Waiting for upvotes. Open for community feedback and needs more interest to be worked on.