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

Different Colors won't gets applied if using multiple Slider on Same page

Open erpardeepjain opened this issue 2 years ago • 2 comments

Hi Creator, I am facing two issues -

  1. I am using multiple Sliders on a single page and trying to provide different progressColorFrom and progressColorTo to a each slider but seems like it is picking color from First Slider and apply it to all, but it should be as passed to each slider.

  2. If I provide Label as blank string then progressColorFrom and progressColorTo won't work, it's bit strange but dont know why

erpardeepjain avatar Dec 11 '22 09:12 erpardeepjain

Hi @erpardeepjain, please refer to my example page. There are multiple sliders with different colors on the page (https://fseehawer.github.io/react-circular-slider/). Key being that you have a unique "label" for each slider. If you then prefer not to visually show the label, set hideLabelValue to true.

fseehawer avatar Dec 12 '22 18:12 fseehawer

@erpardeepjain Think of the label prop as an important key of some sorts, the default is ANGLE so rendering multiple progress bars will all have the id #ANGLE which defaults to the first style implementation. You should try changing the label prop on each slider. Even if you're doing a custom render, it should still have unique label text

edbella avatar Jan 06 '23 03:01 edbella