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

Add support for optional marks (a styled element at each step) #35

Closed
luisrudge opened this issue Sep 11, 2019 · 12 comments · Fixed by #94
Closed

Add support for optional marks (a styled element at each step) #35

luisrudge opened this issue Sep 11, 2019 · 12 comments · Fixed by #94
Labels
enhancement New feature or request

Comments

@luisrudge
Copy link

is there a way to style steps? if not, would you accept a PR to do that?

@tajo
Copy link
Owner

tajo commented Sep 11, 2019

Could you describe it more?

@luisrudge
Copy link
Author

When I use the step prop, I'd like to be able to customize how the step looks like (probably with a renderStep method to keep the api consistent.

Example from material-ui:

custom steps

What I actually want to achieve:
image

@tajo
Copy link
Owner

tajo commented Sep 12, 2019

There is no "out of the box" support but you have a complete access to the "track element". It comes with the getTrackBackground utility that generates a linear gradient to set different background "before" and "after". You could write your own function to also add steps. Or introduce steps as a second background / layer. Really up to you at this point.

@luisrudge
Copy link
Author

@tajo but I assume the lib already knows where the steps are, that's how you can 'stick' the thumb to the step correct position. Consumers of the library would have to add code to calculate where the steps should be based on width, size etc..

@tajo
Copy link
Owner

tajo commented Sep 20, 2019

@tajo but I assume the lib already knows where the steps are, that's how you can 'stick' the thumb to the step correct position. Consumers of the library would have to add code to calculate where the steps should be based on width, size etc..

Yea, the renderTrack could pass the positions through a prop. And there could be some additional getTrackBackgroundStep utility function using those steps to generate that background.

Do you want to give it a try?

@luisrudge
Copy link
Author

That's a nice idea! I'll give it a shot during the weekend. Thanks for the tip

@tajo tajo added the enhancement New feature or request label Sep 25, 2019
@hungle1220

This comment has been minimized.

@giacomoalonzi
Copy link

giacomoalonzi commented Mar 30, 2020

this feature has been implemented? I'm trying to use this library to achieve the same result, but as you can see I'm not able to align dots with slider movements.
Screenshot 2020-03-30 at 17 54 50

Thanks

@tajo
Copy link
Owner

tajo commented Mar 30, 2020

this feature has been implemented

It's been not.

@jameschetwood
Copy link

You can also do this by setting one of the colors in getTrackBackground to "transparent", and by having the linear gradient in a containing div.

@ianninirojas
Copy link

Hi, was anyone able to style the step break?

@tajo
Copy link
Owner

tajo commented Sep 11, 2020

I'm working on this now.

@tajo tajo mentioned this issue Sep 13, 2020
@tajo tajo changed the title style steps Add support for optional marks (a styled element at each step) Sep 13, 2020
@tajo tajo closed this as completed in #94 Sep 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants