react-native-slider icon indicating copy to clipboard operation
react-native-slider copied to clipboard

feat: allow track component customization

Open pawelangelow opened this issue 2 years ago • 1 comments

It would be nice if there's a control over the Track, especially the minimum area (between 0 and the Thumb). So I played around and this is my solution to the problem. LMK if I'm missing a step or details (I couldn't find a contributing guide).

My example is not that smart, because the demo implementation can be achieved through styles. Another example would be a specific component, let's say a linear gradient - <LinearGradient /> and the following usage

const LinearGradient = () => <HeavyUiLogicComponent />

<Slider  renderMinimumTrackMarkComponent={LinearGradient} />

Preview

https://user-images.githubusercontent.com/6314481/176449321-548bf74e-a27c-4ef4-9388-bdd05d9fdbdf.mov

pawelangelow avatar Jun 29 '22 13:06 pawelangelow

The preview for renderMaximumTrackComponent

https://user-images.githubusercontent.com/6314481/177112756-677f3692-282c-400a-9b5c-727cb3012698.mov

And a better demo for such a use case

https://user-images.githubusercontent.com/6314481/177112902-10f9f4b9-3698-4c8a-917e-a36f6a978546.mov

pawelangelow avatar Jul 04 '22 08:07 pawelangelow

@pawelangelow - Very sorry for the delay here, would you be able to resolve the conflicts in this PR?

miblanchard avatar Dec 27 '22 23:12 miblanchard

@miblanchard Sure, no worries 👍

Demo after rebase:

https://user-images.githubusercontent.com/6314481/209987105-e595a1df-63eb-473c-bb5d-5daf9811f1b7.mov

pawelangelow avatar Dec 29 '22 16:12 pawelangelow