Adjust size of input edit boxes font and width

angel-boschdom · Jan 8, 2024 · 8d07bf8 · 8d07bf8
1 parent f9cc43c
commit 8d07bf8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -30,12 +30,12 @@ <h1>Simulate Compound Growth With Volatility</h1>
 
             <div class="input-wrapper">
                 <label for="cagr">CAGR (%): <span id="cagrValue">9</span>%</label>
-                <input type="range" id="cagr" name="cagr" min="0" max="30" value="9" step="0.5" oninput="updateSliderValue('cagr', 'cagrValue')">
+                <input type="range" id="cagr" name="cagr" min="0" max="30" value="9" step="1" oninput="updateSliderValue('cagr', 'cagrValue')">
             </div>
 
             <div class="input-wrapper">
                 <label for="volatility">Annualized volatility (%): <span id="volatilityValue">14</span>%</label>
-                <input type="range" id="volatility" name="volatility" min="0" max="50" value="14" step="0.5" oninput="updateSliderValue('volatility', 'volatilityValue')">
+                <input type="range" id="volatility" name="volatility" min="0" max="50" value="14" step="1" oninput="updateSliderValue('volatility', 'volatilityValue')">
             </div>
 
             <div class="input-wrapper">

diff --git a/styles.css b/styles.css
@@ -46,8 +46,8 @@ h1 {
     margin-bottom: 30px; /* Increase vertical separation */
 }
 .content input[type="number"] {
-    width: 30%; /* Narrow width for number inputs */
-    font-size: 1.5em; /* Larger font size for the number inside the input */
+    width: 35%; /* Custom width for number inputs */
+    font-size: 1.3em; /* Larger font size for the number inside the input */
 }
 .content input[type="range"],
 .content button {