Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom thumb's component with additional props #655

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

BartoszKlonowski
Copy link
Member

@BartoszKlonowski BartoszKlonowski commented Oct 8, 2024

This pull request closes #154
It implements additional possibilities of customizing the Slider's thumb component.
Including:

  • minimum and maximum value are known at level of the thumb custom component,
  • as well as the currentValue so that the main, custom component can know it's current position.
  • It also adds the index of where that custom step component actually is and compare it to currentValue to know whether it is pass or before the thumb ("filled" or "empty").

What is still to be done before merging:

  • document all the additional props
    Although it can be done in separate issue, as the docs would already use some attention to improve readability, especially considering extended options of customization.
  • Optimize
    We currently render a lot each go, so it would be good to take a closer look
  • Analyze and fix the example case
    The example implemented for new addition behaves incorrectly on iOS (the left section of custom thumb changes the position each step. It blinks for a moment before correctly render).

Below is the short demo with the implemented example:
(iOS to the left, Android on the right)

154-custom-component.mp4

@BartoszKlonowski BartoszKlonowski requested review from draggie and removed request for draggie October 8, 2024 11:32
@BartoszKlonowski BartoszKlonowski changed the title Feature/154/custom component for marker Custom thumb's component with additional props Oct 8, 2024
@dule-vikki
Copy link

@BartoszKlonowski
I see that we just can add custom component for StepMarker only, right?
In this PR, Can we add custom component for Thumb?

@BartoszKlonowski
Copy link
Member Author

@BartoszKlonowski I see that we just can add custom component for StepMarker only, right? In this PR, Can we add custom component for Thumb?

Yes, that is the goal of this PR. Although, need to mention that even with this PR it would still require using the StepMarker component, but to render it only if stepMarked is true. I didn't want to split this between step marker and thumb only, but I'm open for suggestions.

@dule-vikki
Copy link

@BartoszKlonowski I see that we just can add custom component for StepMarker only, right? In this PR, Can we add custom component for Thumb?

Yes, that is the goal of this PR. Although, need to mention that even with this PR it would still require using the StepMarker component, but to render it only if stepMarked is true. I didn't want to split this between step marker and thumb only, but I'm open for suggestions.

@BartoszKlonowski
OK. I'm looking forward to being able to custom Thumb component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom component for marker
2 participants