Currently, I'm exploring the benefits of utilizing variable fonts for a school project. As part of this project, I am working on incorporating sliders to adjust the font attributes.
Specifically, I have chosen to use the Gingham variable font for this exercise.
While I have successfully implemented the font-weight slider, I seem to be facing difficulties with the width slider and can't seem to pinpoint the issue. Any insights on what might be going wrong?
Below is the snippet of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Variable Fonts</title>
<link rel="stylesheet" href="css/master.css">
</head>
<body>
<h1>Adjust the sliders to modify the Variable Font: Gingham</h1>
<p id="testarea" contenteditable="true">Type Text Here</p>
<label for="slider_weight">Weight</label>
<input type="range" id="slider_weight" name="slider" value="300" min="300" max="700" step="10">
<span id="value_weight"></span>
<br>
<label for="slider_width">Width</label>
<input type="range" id="slider_width" name="slider" value="100" min="10" max="100" step="1">
<span id="value_width2"></span>
<script src="js/slider.js" charset="utf-8"></script>
</body>
</html>
Here is my JavaScript implementation:
document.getElementById('slider_weight').addEventListener("input", function () {
var axisValue = document.getElementById('slider_weight').value;
document.getElementById('testarea').style.fontWeight = axisValue;
document.getElementById('value_weight').innerText = axisValue;
});
document.getElementById('slider_width').addEventListener("input", function () {
var axisValue2 = document.getElementById('slider_width').value;
document.getElementById('testarea').style.fontStretch = axisValue2;
document.getElementById('value_width2').innerText = axisValue2;
});