clxxiii.dev
Two teams try and fill in any horizontal, vertical, or diagonal line on a bingo board by playing maps on osu!
osu.bingo
osu
1<script lang="ts">
2 import { createEventDispatcher } from 'svelte';
3
4 export let color: string = '#fff';
5 export let min = 0;
6 export let max = 100;
7 export let selected_min = 40;
8 export let selected_max = 50;
9 export let difference = 5;
10 export let decimals = 2;
11
12 export let disabled;
13
14 // For showing the value, what to divide by
15 export let divisor = 1;
16
17 const dispatch = createEventDispatcher();
18
19 export const minChange = (change: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
20 const value = parseInt(change.currentTarget.value);
21 if (selected_max - difference <= value) {
22 change.currentTarget.value = `${selected_max - difference}`;
23 }
24 };
25
26 export const maxChange = (change: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
27 const value = parseInt(change.currentTarget.value);
28 if (selected_min + difference >= value) {
29 change.currentTarget.value = `${selected_min + difference}`;
30 }
31 };
32
33 const update = () => {
34 dispatch('update', { min: selected_min, max: selected_max });
35 };
36</script>
37
38<div style="--c: {disabled ? '#888' : color}">
39 <div class="rounded-full bg-zinc-900 p-1">
40 <div class="group relative h-4">
41 <input
42 on:change={update}
43 on:input={minChange}
44 bind:value={selected_min}
45 {disabled}
46 class="absolute left-0 top-[50%] z-10 transition group-hover:brightness-125"
47 type="range"
48 {min}
49 {max}
50 />
51 <input
52 on:change={update}
53 on:input={maxChange}
54 bind:value={selected_max}
55 class="absolute left-0 top-[50%] z-10 transition group-hover:brightness-125"
56 {disabled}
57 type="range"
58 {min}
59 {max}
60 />
61 <div
62 style="--l: calc({(selected_min * 100) / (max - min)}% - {selected_min /
63 (max - min)} * 1rem + 0.5rem); --w: calc({((selected_max - selected_min) * 100) /
64 (max - min)}% - {(selected_max - selected_min) / (max - min)} * 1rem)"
65 class="absolute left-[var(--l)] z-0 h-full w-[var(--w)] bg-[var(--c)]"
66 ></div>
67 </div>
68 </div>
69 <div class="flex justify-between px-1">
70 <span>
71 {(selected_min / divisor).toFixed(decimals)}
72 </span>
73 <span>
74 {(selected_max / divisor).toFixed(decimals)}
75 </span>
76 </div>
77</div>
78
79<style>
80 input[type='range'] {
81 appearance: none;
82 height: 0px;
83 width: 100%;
84 pointer-events: none;
85 }
86 input[type='range']::-webkit-slider-thumb {
87 -webkit-appearance: none;
88 pointer-events: all;
89 width: 1rem;
90 height: 1rem;
91 background-color: var(--c);
92 border: 0;
93 border-radius: 50%;
94 cursor: pointer;
95 }
96 input[type='range']::-moz-range-thumb {
97 -webkit-appearance: none;
98 appearance: none;
99 pointer-events: all;
100 width: 1rem;
101 height: 1rem;
102 background-color: var(--c);
103 border: 0;
104 border-radius: 50%;
105 cursor: pointer;
106 }
107</style>