JavaScript ile bir web sayfasındaki yazı boyutlarını dinamik olarak değiştirmek, kullanıcı deneyimini artıran etkili bir yöntemdir. Özellikle range input elemanı ile bu işlemi gerçekleştirmek, sayfanın modern ve etkileşimli bir görünüm kazanmasını sağlar. Range input, kullanıcıya bir kaydırma çubuğu sunar ve bu çubuğu hareket ettirerek belirli bir aralıktaki değerleri kolayca değiştirmelerini mümkün kılar. Yazı boyutunu değiştirmek için HTML, CSS ve JavaScript’i bir arada kullanarak basit bir arayüz oluşturabiliriz. Bu sayede kullanıcı, bir kaydırma çubuğunu hareket ettirerek metin boyutunu istediği gibi ayarlayabilir.

Bu işlemi gerçekleştirmek için HTML tarafında bir range input elemanı ve stil açısından daha modern bir görünüm sağlamak için CSS ile biraz süsleme yapılabilir. JavaScript ile range input elemanının değerini dinleyip, bu değere göre yazının boyutunu değiştirebiliriz. Örneğin, minimum 10px ve maksimum 50px arasında değişen bir range input ile bir yazının boyutunu istediğimiz gibi kontrol edebiliriz. Böylece, sayfa kullanıcıları görsel ihtiyaçlarına göre metin boyutunu kişiselleştirebilir.

HTML

<div class="container">
  <h2>Yazı Boyutunu Değiştir</h2>
  <input type="range" id="fontSizeRange" class="range-slider" min="10" max="50" value="24">
  <p id="text">Bu yazının boyutunu ayarla!</p>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f2f5;
}
.container {
  text-align: center;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.range-slider {
  width: 100%;
  margin: 20px 0;
}
#text {
  font-size: 24px;
  color: #333;
  transition: font-size 0.2s;
}

JavaScript

const fontSizeRange = document.getElementById("fontSizeRange");
const text = document.getElementById("text");

fontSizeRange.addEventListener("input", function() {
	text.style.fontSize = fontSizeRange.value + "px";
});

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.