Open jlarmstrongiv opened 3 years ago
Hi @jlarmstrongiv, I always appreciate it when someone contributes to my library. You are welcomed to create a PR. Thanks!
progressGradient
@jlarmstrongiv hi do you have working sample for multi stops
@dev2-piniada The example code above should work for multiple color stops. Unfortunately, my project ended up going in a different direction and I was unable to finish a PR for it.
That would be a great feature! I was hoping I could mimic a kelvin color temperature gradient, but now I see this is not yet implemented... Awesome Circular Slider by the way!
I love how smooth this implementation of a circular slider is! My end goal is to create a hue slider for a color picker.
Luckily, svg
stop-color
acceptstransparent
as a value. Translucent colors withstop-opacity
are not currently supported as props in this library.The main problem is the
trackColor
, which is eventually passed down to the svg circle asstroke={trackColor}
. Unfortunately, the stroke does not support the css gradient syntax. Instead, it requires alinearGradient
definition within the svg. The current implementation of the progress bar supports two color gradients, but not the near infinite (~360) multi-color gradient needed for the color picker.I think it would be great to upgrade the stroke of the trackColor and the progress bar at the same time. I noticed this library prides itself on having zero dependencies; otherwise, I would suggest parsing colors via tinycolor.
I think it would be great to have a new color and gradient syntax for the trackColor and the progress bar. Perhaps a syntax like:
Implemented like:
My only other comment on the implementation is that we could cache the
defs
withReact.useMemo
, since we don’t need to recalculate that on every input change.Of course, changing the syntax would probably mean a major version bump. If you’re okay with that, I could formalize a pull request. Anyway, thanks for this awesome library!
TODO: references