Fylo Data Storage html, scss, vanilla js

I'm just starting to understand manipulating the DOM in JavaScript; so I thought I'd try and manipulate the slider. According to MDN docs, styling the input slider is "Non-standard – don't use in production". To create the gradient, I added a whole load of box-shadows to the ::-webkit-slider-thumb/::-moz-range-thumb (didn't bother with -ms). It works -sort of- but isn't elegant. Anyone have an easier/more elegant solution?