mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
27 lines
791 B
Plaintext
27 lines
791 B
Plaintext
<section id="slider" class="w-full rounded-lg border scroll-mt-16">
|
|
<header class="border-b px-4 py-3">
|
|
<h2 class="text-sm font-medium">Slider</h2>
|
|
</header>
|
|
<div class="p-4">
|
|
<div class="max-w-sm">
|
|
<input
|
|
type="range"
|
|
class="input w-full"
|
|
min="0"
|
|
max="27"
|
|
value="12"
|
|
x-data="{
|
|
updatePercent(el) {
|
|
const min = parseFloat(el.min || 0);
|
|
const max = parseFloat(el.max || 100);
|
|
const value = parseFloat(el.value);
|
|
const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
|
|
el.style.setProperty('--slider-value', `${percent}%`);
|
|
}
|
|
}"
|
|
x-init="updatePercent($el)"
|
|
@input="updatePercent($el)"
|
|
>
|
|
</div>
|
|
</div>
|
|
</section> |