-
-
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
Feature request
Support visual marks/ticks
In the native <input type='range'>, we can do it by adding a <datalist> and linking it with the id.
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="++50">
</datalist>Examples in other libraries
MUI - https://mui.com/material-ui/react-slider/#discrete-sliders
Mantine - https://mantine.dev/core/slider/#marks
ARK UI - https://ark-ui.com/react/docs/components/slider#adding-marks
Chakra UI - https://www.chakra-ui.com/docs/components/slider#marks
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.