File size: 1,615 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<script lang="ts">
import { onMount } from "svelte";
import WaveSurfer from "wavesurfer.js";
export let currentVolume = 1;
export let show_volume_slider = false;
export let waveform: WaveSurfer;
let volumeElement: HTMLInputElement;
onMount(() => {
adjustSlider();
});
const adjustSlider = (): void => {
let slider = volumeElement;
if (!slider) return;
slider.style.background = `linear-gradient(to right, var(--color-accent) ${
currentVolume * 100
}%, var(--neutral-400) ${currentVolume * 100}%)`;
};
$: currentVolume, adjustSlider();
</script>
<input
bind:this={volumeElement}
id="volume"
class="volume-slider"
type="range"
min="0"
max="1"
step="0.01"
value={currentVolume}
on:focusout={() => (show_volume_slider = false)}
on:input={(e) => {
if (e.target instanceof HTMLInputElement) {
currentVolume = parseFloat(e.target.value);
waveform.setVolume(currentVolume);
}
}}
/>
<style>
.volume-slider {
-webkit-appearance: none;
appearance: none;
width: var(--size-20);
accent-color: var(--color-accent);
height: 4px;
cursor: pointer;
outline: none;
border-radius: 15px;
background-color: var(--neutral-400);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 15px;
width: 15px;
background-color: var(--color-accent);
border-radius: 50%;
border: none;
transition: 0.2s ease-in-out;
}
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
background-color: var(--color-accent);
border-radius: 50%;
border: none;
transition: 0.2s ease-in-out;
}
</style>
|