Forgotten variable in CSS

Expected behavior

Don’t have undefined CSS variables.

Actual behavior

There are undefined CSS Variables

Steps to reproduce

• https://raw.githubusercontent.com/sampotts/plyr/master/dist/plyr.css

If you look there, you’ll see this declaration:

::-webkit-slider-runnable-track{
  background:0 0;
  border:0;
  border-radius:3px;
  height:6px;
  transition:all .3s ease;
  -webkit-user-select:none;
  user-select:none;
  background-image:linear-gradient(to right,currentColor var(--value),transparent var(--value))
}

Which has the --value variable there. Comes from here https://github.com/sampotts/plyr/blob/600f0eb8a3cf49f5268e5c15487797d496bc19b6/src/sass/components/sliders.scss#L22

It does seem the only element having a var notation. Keen to submit a PR but unsure what the intended value was.

[Antonio-Laguna]

Thanks a lot for the inside. When I inspected the shadow dom and saw the value progressing then it struck me. Really clever!

[sampotts]

Sorry for the abrupt answer. Basically all browsers have capacity to allow you to style the “lower fill” of an <input type="range"> slider. Edge even allows you to style both sides! WebKit however is missing this, for whatever reason. In v2 I dealt with this by displaying a <progress> behind the slider but always felt it was a hack and then discovered it was possible to use JS + CSS variables (since WebKit supported them ages ago) to set the values of a background gradient instead. This is the JavaScript part of it:

https://github.com/sampotts/plyr/blob/master/src/js/controls.js#L15