Skip to content

[slider] Support for marks #462

@mj12albert

Description

@mj12albert

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

https://refreshless.com/nouislider/examples/

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: sliderChanges related to the slider component.type: new featureExpand 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.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions