wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
86 lines
1.6 KiB
Svelte
86 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
|
|
interface Props {
|
|
current_volume?: number;
|
|
show_volume_slider?: boolean;
|
|
}
|
|
|
|
let {
|
|
current_volume = $bindable(),
|
|
show_volume_slider = $bindable(false)
|
|
}: Props = $props();
|
|
|
|
let volume_element: HTMLInputElement | undefined = $state();
|
|
|
|
onMount(() => {
|
|
adjustSlider();
|
|
});
|
|
|
|
const adjustSlider = (): void => {
|
|
let slider = volume_element;
|
|
if (!slider) return;
|
|
|
|
slider.style.background = `linear-gradient(to right, white ${
|
|
(current_volume ?? 1) * 100
|
|
}%, rgba(255, 255, 255, 0.3) ${(current_volume ?? 1) * 100}%)`;
|
|
};
|
|
|
|
$effect(() => {
|
|
current_volume;
|
|
adjustSlider();
|
|
});
|
|
</script>
|
|
|
|
<input
|
|
bind:this={volume_element}
|
|
id="volume"
|
|
class="volume-slider"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={current_volume ?? 1}
|
|
onfocusout={() => (show_volume_slider = false)}
|
|
oninput={(e) => {
|
|
if (e.target instanceof HTMLInputElement) {
|
|
current_volume = parseFloat(e.target.value);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<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: rgba(255, 255, 255, 0.3);
|
|
margin-left: var(--spacing-sm);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 15px;
|
|
width: 15px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
border: none;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
height: 15px;
|
|
width: 15px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
border: none;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
</style>
|