mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-17 17:07:07 +00:00
AdenMGB
8a5424c5a4
Address audit findings across background handlers, openers, plugins, and UI: URL allowlists, XSS reductions, popup lifecycle fixes, plugin dispose/cleanup, cloud sync hardening, global search mathjs sandbox, and settings storage fixes.
45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
let { state = $bindable(), onChange, min = 0, max = 100, step = 1 } = $props<{
|
|
state: number,
|
|
onChange: (value: number) => void,
|
|
min?: number,
|
|
max?: number,
|
|
step?: number
|
|
}>();
|
|
let percentage = $derived(((state - min) / (max - min)) * 100);
|
|
</script>
|
|
|
|
<div class="relative w-full min-w-0">
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
bind:value={state}
|
|
style={`background: linear-gradient(to right, #30d259ad 0%, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
|
|
onchange={(e) => onChange(Number(e.currentTarget.value))}
|
|
class="w-full h-1 rounded-full appearance-none cursor-pointer slider"
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
|
background: white;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 24px;
|
|
height: 24px;
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
|
background: white;
|
|
color: #30d259ad;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
}
|
|
</style> |