diff --git a/src/index.html b/src/index.html
index 33f97674..a356bf81 100644
--- a/src/index.html
+++ b/src/index.html
@@ -332,7 +332,7 @@
                 <hr>
                 <div class="input-wrap">
                   <label for="control-header-greeting-size">Size</label>
-                  <input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                  <input id="control-header-greeting-size" class="control-header-greeting-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                 </div>
                 <div class="button-wrap">
                   <button class="control-header-greeting-size-default button mb-0" tabindex="-1">Default Greeting size</button>
@@ -362,7 +362,7 @@
                 <hr>
                 <div class="input-wrap">
                   <label for="control-header-transitional-size">Size</label>
-                  <input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                  <input id="control-header-transitional-size" class="control-header-transitional-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                 </div>
                 <div class="button-wrap">
                   <button class="control-header-transitional-size-default button mb-0" tabindex="-1">Default Transitional size</button>
@@ -436,7 +436,7 @@
               <hr>
               <div class="input-wrap">
                 <label for="control-header-clock-size">Size</label>
-                <input id="control-header-clock-size" class="control-header-clock-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                <input id="control-header-clock-size" class="control-header-clock-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
               </div>
               <div class="button-wrap">
                 <button class="control-header-clock-size-default button mb-0" tabindex="-1">Default Clock size</button>
@@ -571,7 +571,7 @@
               <hr>
               <div class="input-wrap">
                 <label for="control-header-date-size">Size</label>
-                <input id="control-header-date-size" class="control-header-date-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                <input id="control-header-date-size" class="control-header-date-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
               </div>
               <div class="button-wrap">
                 <button class="control-header-date-size-default button mb-0" tabindex="-1">Default Date size</button>
@@ -670,7 +670,7 @@
                 <hr>
                 <div class="input-wrap">
                   <label for="control-header-search-size">Size</label>
-                  <input id="control-header-search-size" class="control-header-search-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                  <input id="control-header-search-size" class="control-header-search-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                 </div>
                 <p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
                 <div class="button-wrap">
@@ -706,7 +706,7 @@
               <hr>
               <div class="input-wrap">
                 <label for="control-header-button-size">Size</label>
-                <input id="control-header-button-size" class="control-header-button-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                <input id="control-header-button-size" class="control-header-button-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
               </div>
               <div class="button-wrap">
                 <button class="control-header-button-size-default button mb-0" tabindex="-1">Default Button size</button>
@@ -796,7 +796,7 @@
               <div class="form-indent">
                 <div class="input-wrap">
                   <label for="control-group-name-size">Name Size</label>
-                  <input id="control-group-name-size" class="control-group-name-size" type="range" min="20" max="500" value="0" step="20" tabindex="-1">
+                  <input id="control-group-name-size" class="control-group-name-size" type="range" min="10" max="500" value="0" step="10" tabindex="-1">
                 </div>
                 <div class="button-wrap">
                   <button class="control-group-name-size-default button mb-0" tabindex="-1">Default Name size</button>