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

Source: ReactJs