feat: better styling for thumb/track radius (#501)

Co-authored-by: Dunsin <[email protected]>

Author: kantakshay

index.html

@@ -1193,46 +1193,58 @@ <h1>Input Range</h1>
             </div>
 
             <!-- Border Radius for Tracks and Thumbs -->
+
             <div class="radius">
               <label for="input-range-thumb-radius">
-                <input
-                  type="checkbox"
-                  id="input-range-thumb-radius"
-                  name="check"
-                  class="input-range-inputs"
-                />
-                <span> Include Thumb Radius </span>
-                <label id="radius-input-label" for="input-range-thumb-input">
-                  <input
-                    type="number"
-                    id="input-range-thumb-input"
-                    name="desired-radius"
-                    class="toggle-radius input-range-inputs"
-                    placeholder="Enter a number e.g. 50"
-                    autofocus
-                    required
-                  />
-                </label>
+                <div class="input-range-container">
+                  <div class="checkbox-title">
+                    <input
+                      type="checkbox"
+                      id="input-range-thumb-radius"
+                      name="check"
+                      class="input-range-inputs circular-checkbox"
+                    />
+
+                    <span> Include Thumb Radius </span>
+                  </div>
+
+                  <label id="radius-input-label" for="input-range-thumb-input">
+                    <input
+                      type="number"
+                      id="input-range-thumb-input"
+                      name="desired-radius"
+                      class="toggle-radius input-range-inputs"
+                      placeholder="Enter a number e.g. 50"
+                      autofocus
+                      required
+                    />
+                  </label>
+                </div>
               </label>
               <label for="input-range-track-radius">
-                <input
-                  type="checkbox"
-                  id="input-range-track-radius"
-                  name="check"
-                  class="input-range-inputs"
-                />
-                <span> Include Track Radius </span>
-                <label id="radius-input-label" for="input-range-track-input">
-                  <input
-                    type="number"
-                    id="input-range-track-input"
-                    name="desired-radius"
-                    class="toggle-radius input-range-inputs"
-                    placeholder="Enter a number e.g. 50"
-                    autofocus
-                    required
-                  />
-                </label>
+                <div class="input-range-container">
+                  <div class="checkbox-title">
+                    <input
+                      type="checkbox"
+                      id="input-range-track-radius"
+                      name="check"
+                      class="input-range-inputs circular-checkbox"
+                    />
+
+                    <span> Include Track Radius </span>
+                  </div>
+                  <label id="radius-input-label" for="input-range-track-input">
+                    <input
+                      type="number"
+                      id="input-range-track-input"
+                      name="desired-radius"
+                      class="toggle-radius input-range-inputs"
+                      placeholder="Enter a number e.g. 50"
+                      autofocus
+                      required
+                    />
+                  </label>
+                </div>
               </label>
             </div>
 

src/style.css

@@ -525,6 +525,49 @@ input::placeholder {
   display: none;
   min-width: 0;
 }
+.track-input,
+.thumb-input {
+  width: 80%;
+  padding: 5px;
+}
+.input-range-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+}
+.checkbox-title {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.circular-checkbox {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+}
+
+/* Style for checked circular checkbox */
+.circular-checkbox:checked {
+  background-color: var(--tertiary-color);
+}
+.circular-checkbox:checked::before {
+  content: '\2713'; /* Unicode checkmark character */
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 1.4; /* Adjust line height for vertical centering */
+  color: #fff; /* Color for the tick mark */
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
 #animation-duration,
 #gradient-border-input {
@@ -1263,3 +1306,21 @@ a {
     margin-top: 50px;
   }
 }
+@media screen and (max-width: 768px) {
+  .input-range-container {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    padding: 5px;
+  }
+  .track-input,
+  .thumb-input {
+    padding: 2px;
+    width: 60%;
+  }
+  .checkbox-title {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+}