mastoradio-fork/src/components/Volume.svelte

21 lines
759 B
Svelte
Raw Normal View History

2020-02-16 22:28:17 +01:00
<div class="volume">
<div class="volume__bg"></div>
<div class="volume__progress" style="width: {volumePercent}%;"></div>
2020-02-23 00:58:53 +01:00
<input class="volume__input" type="range" min="0" max="100" step="2" bind:value={$volume}>
2020-02-16 22:28:17 +01:00
</div>
<!-- for mask -->
<svg width="0" height="0">
<clipPath id="volume">
<path fill="#C4C4C4" d="M40,15.201328 L40,1.80052901 C40,0.518480567 38.6821237,-0.351956175 37.4843106,0.138924799 L0.562431379,15.2698574 C-0.356904919,15.6466792 -0.0844775345,17 0.910700368,17 L38.1808595,17 C39.1855708,17 40,16.1947345 40,15.201328 Z"/>
</clipPath>
</svg>
<script>
import { getContext } from 'svelte'
const volume = getContext('volume')
2020-02-16 22:28:17 +01:00
// to fix visual glitch
$: volumePercent = $volume - 2
2020-02-16 22:28:17 +01:00
</script>