From 488531d1d5b2a2fa273901ba70782f8d8b86f9bd Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Tue, 27 Apr 2021 16:52:54 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Slider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/frontend/src/components/Slider.js        | 23 ++++++++++++
 .../frontend/src/components/Slider.module.css | 36 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 code/frontend/src/components/Slider.js
 create mode 100644 code/frontend/src/components/Slider.module.css

diff --git a/code/frontend/src/components/Slider.js b/code/frontend/src/components/Slider.js
new file mode 100644
index 0000000..e6689ea
--- /dev/null
+++ b/code/frontend/src/components/Slider.js
@@ -0,0 +1,23 @@
+import React from "react"
+import Style from "./Slider.module.css"
+import classNames from "classnames"
+
+
+/**
+ * A slider that allows to select a numeric value in a range.
+ *
+ * @todo Custom styling only works on Firefox!
+ *
+ * @param className - Additional class(es) to add to the element.
+ * @param props - Additional props to pass to the element.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Slider({ className, ...props }) {
+    return (
+        <input
+            type={"range"}
+            className={classNames(Style.Slider, className)} {...props}
+        />
+    )
+}
diff --git a/code/frontend/src/components/Slider.module.css b/code/frontend/src/components/Slider.module.css
new file mode 100644
index 0000000..488dce0
--- /dev/null
+++ b/code/frontend/src/components/Slider.module.css
@@ -0,0 +1,36 @@
+.Slider {
+    width: 100%;
+}
+
+@-moz-document url-prefix() {
+    .Slider {
+        outline: none;
+        background-color: transparent;
+    }
+
+    .Slider::-moz-range-track {
+        background-color: var(--bg-field-off);
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    .Slider:focus::-moz-range-track {
+        background-color: var(--bg-field-on);
+    }
+
+    .Slider::-moz-range-progress {
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    .Slider::-moz-range-thumb {
+        background-color: var(--fg-field-off);
+        border-width: 0;
+        height: 25px;
+        width: 10px;
+    }
+
+    .Slider:focus::-moz-range-thumb {
+        background-color: var(--fg-field-on);
+    }
+}
\ No newline at end of file