Trying to make the sliders a bit easier to use

Author: stephenpardy

kensukekoike.html

@@ -31,21 +31,25 @@
 .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: #222;
     cursor: pointer;
 }
 
 .slider::-moz-range-thumb {
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     background: #222;
     cursor: pointer;
 }
 
+.minHeight{
+    min-height: 75px;
+}
+
 input[type="range"]:disabled {
     opacity: 0.1;
 }
@@ -75,43 +79,54 @@ <h2>KensukeKoikeScript</h2>
 
     </div>
 
-
-    <div class='row'>
-        Live update: <input type="checkbox" id="togglePreview" onclick="togglePreview()" checked>
-    </div>
-
     <div class="row">
         <div class='col-md-3'>
-            <div><p>Height=<span  id='hText'></span></p>
-                <input type="range" min="1" max="100" value="10" step="1" class="slider" id="hSlider">
-            </div>
-
-            <div><p>Width=<span  id='wText'></span> -- Fix to height<input type="checkbox" id="fixWidth" onclick="fixWidth()" checked></p>
-                <input type="range" min="1" max="100" value="10" step="1" class="slider" id="wSlider">
+            <div class="row">
+                <div class="col-12 minHeight">
+                    <p>Height=<span  id='hText'></span></p>
+                    <input type="range" min="1" max="100" value="10" step="1" class="slider" id="hSlider">
+                </div>
+                <div class="col-12 minHeight">
+                    <p>Width=<span  id='wText'></span> -- Fix to height
+                    <input type="checkbox" id="fixWidth" onclick="fixWidth()" checked></p>
+                    <input type="range" min="1" max="100" value="10" step="1" class="slider" id="wSlider">
+                </div>
             </div>
         </div>
         <div class='col-md-3'>
-            <div><p>Row Stride=<span  id='hstrideText'></span></p>
-                <input type="range" min="0" max="100" value="20" step="1" class="slider" id="hstrideSlider">
-            </div>
-            <div><p>Column Stride=<span  id='wstrideText'></span>  -- Fix to row stride<input type="checkbox" id="fixWidthStride" onclick="fixWidthStride()" checked></p>
-                <input type="range" min="0" max="100" value="20" step="1" class="slider" id="wstrideSlider">
+            <div class='row'>
+                <div class="col-12 minHeight">
+                    <p>Row Stride=<span  id='hstrideText'></span></p>
+                    <input type="range" min="0" max="100" value="20" step="1" class="slider" id="hstrideSlider">
+                </div>
+                <div class="col-12 minHeight">
+                    <p>Column Stride=<span  id='wstrideText'></span>  -- Fix to row stride<input type="checkbox" id="fixWidthStride" onclick="fixWidthStride()" checked></p>
+                    <input type="range" min="0" max="100" value="20" step="1" class="slider" id="wstrideSlider">
+                </div>
             </div>
         </div>
         <div class='col-md-3'>
-            <div><p>Columns=<span  id='nText'></span></p>
-                <input type="range" min="1" max="50" value="10" step="1" class="slider" id="nSlider">
-            </div>
-            <div><p>Rows=<span  id='mText'></span></p>
-                <input type="range" min="1" max="50" value="10" step="1" class="slider" id="mSlider">
+            <div class='row'>
+                <div class='col-12 minHeight'>
+                    <p>Columns=<span  id='nText'></span></p>
+                    <input type="range" min="1" max="50" value="10" step="1" class="slider" id="nSlider">
+                </div>
+                <div class='col-12 minHeight'>
+                    <p>Rows=<span  id='mText'></span></p>
+                    <input type="range" min="1" max="50" value="10" step="1" class="slider" id="mSlider">
+                </div>
             </div>
         </div>
         <div class='col-md-3'>
-            <div><p>X offset=<span  id='x_offsetText'></span> -- <button id='centerX' type='button' onclick='centerX();'>center</button></p>
-                <input type="range" min="-300" max="300" value="0" step="1" class="slider" id="x_offsetSlider">
-            </div>
-            <div><p>Y offset=<span  id='y_offsetText'></span> -- <button id='centerY' type='button' onclick='centerY();'>center</button></p>
-                <input type="range" min="-300" max="300" value="0" step="1" class="slider" id="y_offsetSlider">
+            <div class="row">
+                <div class='col-12 minHeight'>
+                    <p>X offset=<span  id='x_offsetText'></span> -- <button id='centerX' type='button' onclick='centerX();'>center</button></p>
+                    <input type="range" min="-300" max="300" value="0" step="1" class="slider" id="x_offsetSlider">
+                </div>
+                <div class='col-12 minHeight'>
+                    <p>Y offset=<span  id='y_offsetText'></span> -- <button id='centerY' type='button' onclick='centerY();'>center</button></p>
+                    <input type="range" min="-300" max="300" value="0" step="1" class="slider" id="y_offsetSlider">
+                </div>
             </div>
         </div>
     </div>