I don't understand this. Why are you specifying the same percentage for both color stops? If the browser honors both, I'd think that it means there is no gradient at all.  If the browser ignores one or both, then they are not needed...

Okay, I've looked at the spec, and this must give you the two solid color effect shown there.

I don't like having to set CSS here in the JS. Could you instead have the overall container element be the gray one, have the inner element be the white one, and just change the height of the inner element?  Then what you'd do here is set just set the position of the handle and set the height of this.els.inner.  That would give a cleaner separation of CSS and JS.