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:

https://codesandbox.io/s/eloquent-worker-qt99n?file=/src/customSlider.js

Any help to resolve the same appreciated :)

Thanks in advance



Read more here: https://stackoverflow.com/questions/64377995/react-range-slider-value-bubble

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: