React Range Slider value bubble

I am trying to create a custom react range slider. So far everything works fine. I need to display the current value of the slider in the circular toggle button every time (not just on being on-slider being active). As the slider is toggled back & forth, the value should be dynamically changing on the circular toggle button. Something like this:

enter image description here

I tried using react refs to capture the current styles and apply CSS on it accordingly, but it doesn't seem to work.

The link for working snippet:

Any help to resolve the same appreciated :)

Thanks in advance

Read more here:

Content Attribution

This content was originally published by bubble-cord at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: