responsive and interactive pricing component

Hello all! This was quite a challenge since this is the first time i had to customize a range slider. I found quite a few solutions that used PURE CSS using just box shadow and overflow properties to style the progress bar and even a property called border-image which i am not quite sure about yet and tried to implement it myself using the box shadow and overflow properties and i had a little bit of success there but applying the overflow property on the range selector not only made the the box shadow casted on the thumb hidden but even hid the thumb itself. I finally gave up and just ended up using javascript instead. How would you guys have used CSS to style it? Any other feedback will be much appreciated.