✨ Add Slider

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}
+        />
+    )
+}

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);
+    }
+}