vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(volume-ui): adjust volume thumb position to align with volume fill using CSS var

Browse source
This commit is contained in:
Dazly Gonsalves 2025-10-19 22:23:19 +05:30
parent 2a708e2b99
commit 40e67070c2
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
js/app.js
View file

@ -890,7 +890,10 @@ document.addEventListener('DOMContentLoaded', async () => {
const updateVolumeUI = () => { const updateVolumeUI = () => {
const { volume, muted } = audioPlayer; const { volume, muted } = audioPlayer;
volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME; volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;
volumeFill.style.width = `${muted ? 0 : volume * 100}%`;
const effectiveVolume = muted ? 0 : volume * 100;
volumeFill.style.setProperty('--volume-level', `${effectiveVolume}%`);
}; };
volumeBtn.addEventListener('click', () => { volumeBtn.addEventListener('click', () => {

4
styles.css
View file

@ -920,7 +920,7 @@ input:checked + .slider:before {
} }
.volume-controls .volume-bar .volume-fill { .volume-controls .volume-bar .volume-fill {
width: 70%; width: var(--volume-level, 70%);
height: 100%; height: 100%;
background-color: var(--foreground); background-color: var(--foreground);
border-radius: 2px; border-radius: 2px;
@ -933,7 +933,7 @@ input:checked + .slider:before {
.volume-controls .volume-bar:hover .volume-fill::after { .volume-controls .volume-bar:hover .volume-fill::after {
content: ''; content: '';
position: absolute; position: absolute;
right: 0; left: calc(var(--volume-level, 70%) - 6px);
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 12px; width: 12px;