diff options
| author | Sam Potts <sam@potts.es> | 2018-01-08 20:53:18 +1100 |
|---|---|---|
| committer | Sam Potts <sam@potts.es> | 2018-01-08 20:53:18 +1100 |
| commit | 8786377a755224ebc281488c5bea849639ae4f2a (patch) | |
| tree | 31ceb00b871bae39696456b3005ba575f7f6340e /src | |
| parent | f0322e8d94953ecc1373e31e34e31a24f7698079 (diff) | |
| download | plyr-8786377a755224ebc281488c5bea849639ae4f2a.tar.lz plyr-8786377a755224ebc281488c5bea849639ae4f2a.tar.xz plyr-8786377a755224ebc281488c5bea849639ae4f2a.zip | |
Use CSS custom property for webkit range fill
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/controls.js | 26 | ||||
| -rw-r--r-- | src/sass/components/sliders.scss | 13 |
2 files changed, 9 insertions, 30 deletions
diff --git a/src/js/controls.js b/src/js/controls.js index 22ca30ad..936bee6b 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -26,30 +26,8 @@ const controls = { return; } - // Inject the stylesheet if needed - if (!utils.is.element(this.elements.styleSheet)) { - this.elements.styleSheet = utils.createElement('style'); - this.elements.container.appendChild(this.elements.styleSheet); - } - - const styleSheet = this.elements.styleSheet.sheet; - const percentage = range.value / range.max * 100; - const selector = `#${range.id}::-webkit-slider-runnable-track`; - const styles = `{ background-image: linear-gradient(to right, currentColor ${percentage}%, transparent ${percentage}%) }`; - - // Find old rule if it exists - const index = Array.from(styleSheet.rules).findIndex(rule => rule.selectorText === selector); - - // Remove old rule - if (index !== -1) { - styleSheet.deleteRule(index); - } - - // Insert new one - styleSheet.insertRule([ - selector, - styles, - ].join(' ')); + // Set CSS custom property + range.style.setProperty('--value', `${range.value / range.max * 100}%`); }, // Get icon URL diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 7ede4415..2e3597a1 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -20,6 +20,7 @@ &::-webkit-slider-runnable-track { @include plyr-range-track(); + background-image: linear-gradient(to right, currentColor var(--value), transparent var(--value)); } &::-webkit-slider-thumb { @@ -111,29 +112,29 @@ // Video range inputs .plyr--full-ui.plyr--video input[type='range'] { &::-webkit-slider-runnable-track { - background: $plyr-video-range-track-bg; + background-color: $plyr-video-range-track-bg; } &::-moz-range-track { - background: $plyr-video-range-track-bg; + background-color: $plyr-video-range-track-bg; } &::-ms-track { - background: $plyr-video-range-track-bg; + background-color: $plyr-video-range-track-bg; } } // Audio range inputs .plyr--full-ui.plyr--audio input[type='range'] { &::-webkit-slider-runnable-track { - background: $plyr-audio-range-track-bg; + background-color: $plyr-audio-range-track-bg; } &::-moz-range-track { - background: $plyr-audio-range-track-bg; + background-color: $plyr-audio-range-track-bg; } &::-ms-track { - background: $plyr-audio-range-track-bg; + background-color: $plyr-audio-range-track-bg; } } |