Scrub slider

[sudhashrestha]

Description

Create the component as shown in the video attached below.

Animation Preview

• Screenshot/Video:

scrub-slider.mov

Note

Please refer to the Animata contributing guidelines available here for rules on how to contribute to the project. Let us know in the comments if you’re working on this issue, and feel free to ask any questions!

Requirements

1. Create a new animated component that matches the provided design.
2. Add example usage of the component in the documentation or storybook.
3. Add credits for any resources, references, or assets used, as specified in the Additional Resources section.

Guidelines & Best Practices

• Write reusable and clean code following the project’s style guide.
• The component should be fully customizable. The user should be able to modify props such as duration, easing, color, and size where applicable.
• Follow the Contributing Guidelines before submitting your pull request.

Important

To ensure more contributors have the opportunity to participate, we kindly request that:

• Each contributor submits only one pull request related to this issue.
• If you're interested in working on this issue, please comment below. We will assign the issue on a first-come, first-served basis.

---

Additional Resources

Interaction by Nitish Khagwal

---

Tip

Join our Discord community if you need help or have any questions. We're here to help you get started and guide you through the process. Join now

[Pikachu-345]

I want to work on this issue

[surajb0710]

@hari @sudhashrestha Hi, can you please assign this to me? let me give it a shot.

[hari]

Done @surajb0710

[surajb0710]

@hari I am unassigning myself from this ticket, as this is beyond my skillset as of now. I will come back once I am ready.

[hari]

@surajb0710 that’s okay, thanks for letting us know.

It is pretty easy using progres and absolutely positioning the indicator.

[TarushGupta23]

i would like to contribute in this

[sumedhakoranga]

I have started working on this, please assign this issue to me

[sumedhakoranga]

@hari @sudhashrestha
Hi, I have submitted a pull request Could you please assign the issue to me and review the PR? Thanks!

[TarushGupta23]

@hari @sumedhakoranga
I have almost completed my work on this - can you assign it to me

Screen.Recording.2024-10-17.at.6.30.49.PM-2.mp4

Features added:

• user will be able to click to move slider
• user will be able to drag slider
• programer will be able to get current value of slider (via useRef)
• programmer will be able to set min, max values along with units
• programmer will be able to set accuracy to be displayed (amount of decimals digits)
• currently working on making the component available in both horizontal and vertical versions
• the component's size can easily be changed according to container's size

[mahaveergurjar]

@hari , why haven't you given @TarushGupta23 a chance to work on the scrub component? I know you've already assigned it to @sumedhakoranga but after merging @sumedhakoranga PR, you should also consider merging Tarush's PR as it further enhances the scrub component.