<div x-data="{ font: 'sans', fontSize: '20', fontWeight: '400', fontWidth: '100', fontWeightRangeStep: '1' }">
  <div class="container-md" :class="{ 'sans': font === 'sans', 'looped': font === 'looped', 'serif': font === 'serif' }">
    <div class="btn-group btn-group-sm w-100 mt-2">
      <a :class="{ 'active': font === 'sans' }" class="btn btn-outline-primary" @click="font = 'sans', fontWeightRangeStep = '1'">Noto Sans Thai</a>
      <a :class="{ 'active': font === 'looped' }" @click="font = 'looped', fontWeightRangeStep = '100'" class="btn btn-outline-primary">Noto Sans Thai Looped</a>
      <a :class="{ 'active': font === 'serif' }" @click="font = 'serif', fontWeightRangeStep = '1'" class="btn btn-outline-primary">Noto Serif Thai</a>
    </div>
    <div class="row mt-2">
      <div :class="{ 'col-12 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }">
        <label for="fontSizeRange" class="form-label mb-0">ขนาดฟอนต์ (<span x-text="fontSize"></span>px)</label>
        <input x-model="fontSize" type="range" class="form-range" id="fontSizeRange" min="12" max="64" step="1">
      </div>
      <div :class="{ 'col-6 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }">
        <label for="fontWeightRange" class="form-label mb-0">น้ำหนัก (<span x-text="fontWeight"></span>)</label>
        <input x-model="fontWeight" type="range" class="form-range" id="fontWeightRange" min="100" max="900" :step="fontWeightRangeStep">
      </div>
      <div :class="{ 'col-6 col-sm-4': font !== 'looped', 'col-12 col-sm-6': font === 'looped' }" x-show="font !== 'looped'">
        <label for="fontWidthRange" class="form-label mb-0">ความกว้าง (<span x-text="fontWidth"></span>%)</label>
        <input x-model="fontWidth" type="range" class="form-range" id="fontWidthRange" min="62.5" max="100" step="0.5">
      </div>
    </div>
    <div class="mt-2">
      <textarea :style="{ 'font-size': fontSize + 'px', 'font-weight': fontWeight, 'font-stretch': fontWidth + '%' }" class="form-control" rows="8">เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร
ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย
ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะ ๆ จ๋า น่าฟังเอยฯ</textarea>
      <p class="mt-2 text-secondary text-center">
        <small>CDN ฟอนต์จาก <a class="link-secondary" href="https://thaiwebfonts.lazywasabi.com/" target="_blank" rel="noreferrer">Thai Web Fonts</a></small>
      </p>
    </div>
  </div>
</div>

@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSansThai/var/NotoSansThai[wdth,wght].css";
@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSansThaiLooped/NotoSansThaiLooped.css";
@import "https://cdn.jsdelivr.net/gh/lazywasabi/[email protected]/fonts/NotoSerifThai/var/NotoSerifThai[wdth,wght].css";

body,
.sans {
  font-family: "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;
}

.serif {
  font-family: "Noto Serif Thai", Lora, Georgia, Cambria, "Times New Roman",
    Times, serif;
}

.looped {
  font-family: "Noto Sans Thai Looped", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif;
}

label {
  font-size: 0.9rem;
}

textarea {
  max-height: 70vh;
}