react-native-slider
react-native-slider copied to clipboard
feat: allow track component customization
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
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 - Very sorry for the delay here, would you be able to resolve the conflicts in this PR?
@miblanchard Sure, no worries 👍
Demo after rebase:
https://user-images.githubusercontent.com/6314481/209987105-e595a1df-63eb-473c-bb5d-5daf9811f1b7.mov