feat: support for the range type of inputs

aplosdev · Aug 14, 2024 · 3d34bd8 · 3d34bd8
1 parent 832be25
commit 3d34bd8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,8 @@
 
 - Add an option to make authors not be displayed
 
+- Support for the range type of inputs
+
 - New Accent Color
 
 ## Cleanup(s)

diff --git a/docs/demo/index.md b/docs/demo/index.md
@@ -227,6 +227,16 @@ You can add a progress bar by using the `<progress>` tag:
 
 <progress value="50" max="100"></progress>
 
+### Range (`<input type="range">`)
+
+You can add a range by using the `<input type="range">` tag:
+
+```html
+<input type="range" max="100" value="33">
+```
+
+<input type="range" max="100" value="33">
+
 ### Sample Output (`<samp>`)
 
 You can add a sample output by using the `<samp>` tag:

diff --git a/src/styles/components/_semantics.scss b/src/styles/components/_semantics.scss
@@ -165,6 +165,47 @@ progress {
   }
 }
 
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.625rem;
+  background-color: var(--color-background-second);
+  border-radius: calc(var(--rounded-xs) - 0.0125rem);
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-accent);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-accent);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &::-ms-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--color-accent);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &::-ms-track {
+    background-color: var(--color-background-second);
+    border-radius: calc(var(--rounded-xs) - 0.0125rem);
+  }
+}
+
 samp {
   border-radius: var(--rounded-sm);
   background-color: var(--color-background-second);