From d0407506f08cf09fbba9195e438b9a4c94a90d86 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Mon, 12 Aug 2024 02:26:40 +0300
Subject: [PATCH] Style sliders (fixes #41)

---
 content/demo/index.md | 17 +++++++++++++++++
 sass/_input.scss      | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/content/demo/index.md b/content/demo/index.md
index fe153dd..58ca9b5 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -325,6 +325,23 @@ With `color` type:
 <label for="color">Disabled:</label>
 <input id="color" type="color" value="#b57edc" disabled />
 
+With `range` type:
+
+<input type="range" min="1" max="100" value="33" id="range">
+<!-- For the demo purposes only -->
+<small id="range-value"></small>
+
+<script type="text/javascript">
+  var slider = document.getElementById("range");
+  var output = document.getElementById("range-value");
+  output.innerHTML = slider.value;
+
+  slider.oninput = function() {
+    output.innerHTML = this.value;
+  }
+</script>
+<!-- End -->
+
 ### Figure Captions (`<figcaption>`)
 
 ```markdown
diff --git a/sass/_input.scss b/sass/_input.scss
index 99f61bd..4d18ff5 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -114,3 +114,37 @@ input[type="color"] {
 		border-radius: calc(var(--rounded-corner-small) / 2);
 	}
 }
+
+input[type="range"] {
+	-webkit-appearance: none;
+	appearance: none;
+	transition: var(--transition);
+	box-shadow: var(--edge-highlight);
+	border-radius: 999px;
+	background: var(--primary-color);
+	width: 100%;
+	height: 0.5rem;
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		cursor: pointer;
+		box-shadow: var(--shadow);
+		border-radius: 999px;
+		background: white;
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	&::-moz-range-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		cursor: pointer;
+		box-shadow: var(--shadow);
+		border: none;
+		border-radius: 999px;
+		background: white;
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+}