ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS custom property for webkit range fill

Browse Source
This commit is contained in:
Sam Potts
2018-01-08 20:53:18 +11:00
parent f0322e8d94
commit 8786377a75
8 changed files with 15 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/js/controls.js vendored
View File

@ -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

13
src/sass/components/sliders.scss
View File

@ -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;
}
}