Question:
How to make website text size adjustable using JavaScript
Product:
I am using Wix Developer Mode (button on the top left)
What are you trying to achieve:
The website will be used by elderly as well as young. I want the elderly to be able to adjust the text size to be bigger. I created a slider with a range from 0 to 100 and default value being 20. Then I open Developer and wrote this code inside (see below). When in Preview mode, I slide the slider, but the text size does not change. Could you please tell me where is my code wrong and how should I adjust it?
What have you already tried:
// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction
$w.onReady(function () {
// Function to update text size
function updateTextSize(percentage) {
const textElements = $w("Text");
textElements.forEach(element => {
// Calculate new font size based on slider percentage (assuming default size is 20px)
let newFontSize = (percentage / 100) * 20;
// Update the font size of the element
element.style.fontSize = `${newFontSize}px`;
});
}
// Initialize slider value
$w("#zoomslider").value = 50; // Set default to 50%
// Set the initial text size based on default slider value
updateTextSize($w("#zoomslider").value);
// Event listener for slider change
$w("#zoomslider").onChange(() => {
let newSize = $w("#zoomslider").value;
updateTextSize(newSize);
});
});
// Write your Javascript code here using the Velo framework API
// Print hello world:
// console.log("Hello world!");
// Call functions on page elements, e.g.:
// $w("#button1").label = "Click me!";
// Click "Run", or Preview your site, to execute your code
});