0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The font color settings are ready. Let’s work on the font size. The user can change the font size in the article by moving the slider. If you move the slider to the left, the font size will shrink, and if you move it to the right, then it will grow. The selected size should be displayed on the page next to the field.</p>
1
<p>The font color settings are ready. Let’s work on the font size. The user can change the font size in the article by moving the slider. If you move the slider to the left, the font size will shrink, and if you move it to the right, then it will grow. The selected size should be displayed on the page next to the field.</p>
2
<p>Font size (14px)</p>
2
<p>Font size (14px)</p>
3
<p>The field with the slider has the size-setting class. This is what it looks like in the markup:</p>
3
<p>The field with the slider has the size-setting class. This is what it looks like in the markup:</p>
4
<input class="size-setting" type="range" min="8" max="48" step="1" value="14"><p>The slider allows the use to select a number from a specified range. In our case it is an integer between 8 and 48. The default value is 14, because the font size in the article is currently 14px.</p>
4
<input class="size-setting" type="range" min="8" max="48" step="1" value="14"><p>The slider allows the use to select a number from a specified range. In our case it is an integer between 8 and 48. The default value is 14, because the font size in the article is currently 14px.</p>
5
<p>The value that the user selects is retrieved in JavaScript using the value property. We need to output this value to the page next to the field. The web designer prepared an element with the pixels class to do this.</p>
5
<p>The value that the user selects is retrieved in JavaScript using the value property. We need to output this value to the page next to the field. The web designer prepared an element with the pixels class to do this.</p>
6
Font size (<span class="pixels">14</span>px)<p>To show the selected number, write it to the<a>textual content</a>of the element with the pixels class.</p>
6
Font size (<span class="pixels">14</span>px)<p>To show the selected number, write it to the<a>textual content</a>of the element with the pixels class.</p>
7
<p>We need to obtain the value when the user moves the slider. Use the onchange event handler. For example:</p>
7
<p>We need to obtain the value when the user moves the slider. Use the onchange event handler. For example:</p>
8
// Find the field and element to output the value let range = document.querySelector('input'); let span = document.querySelector('span'); // Add the event handler to the field range.onchange = function () { // Output the value to the page span.textContent = range.value }<p>Find the necessary elements and output the selected font size to the page.</p>
8
// Find the field and element to output the value let range = document.querySelector('input'); let span = document.querySelector('span'); // Add the event handler to the field range.onchange = function () { // Output the value to the page span.textContent = range.value }<p>Find the necessary elements and output the selected font size to the page.</p>