From 3d34bd8cfcc3144fbcbc94706311b41179fc5868 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Wed, 14 Aug 2024 21:02:40 +0300
Subject: [PATCH] feat: support for the range type of inputs

---
 CHANGELOG.md                          |  2 ++
 docs/demo/index.md                    | 10 +++++++
 src/styles/components/_semantics.scss | 41 +++++++++++++++++++++++++++
 3 files changed, 53 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bbe0f9f..845bb40 100644
--- 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
index b3080dc..24040c9 100644
--- 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
index baaaf50..bcbf4e4 100644
--- 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);