How can I program a customized graphic slider (as in the bellow picture)?

Hi,
I am looking to include a question in qualtrics that combines a graphic slider with three barrels (see picture) and a normal slider (0 to 100). The idea is that the barrels are emptied the higher the value on the slider. I understand that a custom Java Script code is needed for that. Are there any recommendations how such a customized graphic slider with three barrels could be programed? See picture bellow for a draft presentation of the graphic slider.
Many thanks,
Sarah