Unify simple Slider styling

cypress/integration/studio.spec.js

@@ -194,7 +194,7 @@ describe("Studio", () => {
 
       cy.get(".item").parent().should("have.css", "z-index", "3");
 
-      cy.get(".rc-slider-mark-text").contains("-1").click();
+      cy.get(".slider-layer .rc-slider-mark-text").contains("-1").click();
 
       cy.get(".item").parent().should("have.css", "z-index", "2");
     });

src/App.jsx

@@ -13,7 +13,6 @@ import { nanoid } from "nanoid";
 import { ToastContainer } from "react-toastify";
 
 import "react-toastify/dist/ReactToastify.css";
-import "rc-slider/assets/index.css";
 import "./react-confirm-alert.css";
 
 import Home from "./views/Home";

src/components/BoardConfig.jsx

@@ -11,7 +11,6 @@ import AutoSave from "../ui/formUtils/AutoSave";
 import Hint from "../ui/formUtils/Hint";
 import Label from "../ui/formUtils/Label";
 import SliderRange from "../ui/SliderRange";
-import { Range } from "rc-slider";
 
 const BoardConfigForm = styled.div`
   display: flex;

src/components/boardComponents/ItemFormFactory.jsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 
 import { useRecoilValue } from "recoil";
 
-import Slider from "rc-slider";
 import { Form, Field } from "react-final-form";
 
 import AutoSave from "../../ui/formUtils/AutoSave";
@@ -14,6 +13,7 @@ import { useItems } from "../Board/Items";
 
 import Label from "../../ui/formUtils/Label";
 import Hint from "../../ui/formUtils/Hint";
+import Slider from "../../ui/Slider";
 
 import ActionsField from "./ActionsField";
 
@@ -104,6 +104,7 @@ const ItemFormFactory = () => {
                     step={5}
                     included={false}
                     marks={{
+                      "-180": -180,
                       "-90": -90,
                       "-45": -45,
                       "-30": -30,
@@ -111,8 +112,10 @@ const ItemFormFactory = () => {
                       30: 30,
                       45: 45,
                       90: 90,
+                      180: 180,
                     }}
                     onChange={onChange}
+                    className={"slider-rotation"}
                   />
                 );
               }}
@@ -140,6 +143,7 @@ const ItemFormFactory = () => {
                       "3": 3,
                     }}
                     onChange={onChange}
+                    className={"slider-layer"}
                   />
                 );
               }}

src/ui/Slider.jsx

@@ -1,35 +1,64 @@
 import React from "react";
 import RCSlider from "rc-slider";
+import styled from "styled-components";
 
 import "rc-slider/assets/index.css";
 
+const StyledSlider = styled.div`
+  margin: 0 0.5em;
+
+  .rc-slider-mark-text {
+    font-size: 1rem;
+  }
+
+  .rc-slider-mark-text-active {
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    border-radius: 1rem;
+    padding: 2px 7px 0px 7px;
+    background-color: var(--color-primary);
+
+    &:before {
+      content: "";
+      position: absolute;
+      margin-top: -10px; // adjust position, arrow has a height of 30px.
+      left: 5px;
+      border: solid 5px transparent;
+      border-bottom-color: var(--color-primary);
+      z-index: 1;
+    }
+  }
+`;
+
 export const sliderStyling = {
-  trackStyle: [
-    {
-      backgroundColor: "var(--color-primary)",
-      height: "5px",
-    },
-  ],
-  railStyle: {
-    backgroundColor: "var(--font-color2)",
-  },
   handleStyle: [
     {
       backgroundColor: "white",
       borderColor: "white",
     },
-    {
-      backgroundColor: "white",
-      borderColor: "white",
-    },
   ],
+  railStyle: {
+    backgroundColor: "var(--color-primary)",
+  },
+  dotStyle: {
+    backgroundColor: "var(--font-color2)",
+    border: "var(--font-color2)",
+    width: "6px",
+    height: "6px",
+    bottom: "-1px",
+  },
 };
 
 // Please check https://github.com/react-component/slider#user-content-common-api
 // for all available props.
 // RCSlider refers to the Slider component of the rc-react library.
 const Slider = (props) => {
-  return <RCSlider {...props} {...sliderStyling} style={{ width: "20em" }} />;
+  return (
+    <StyledSlider className={props.className}>
+      <RCSlider {...props} {...sliderStyling} />
+    </StyledSlider>
+  );
 };
 
 export default Slider;

src/ui/SliderRange.jsx

@@ -4,8 +4,6 @@ import styled from "styled-components";
 
 import "rc-slider/assets/index.css";
 
-import { sliderStyling } from "./Slider";
-
 const StyledSliderRange = styled.div`
   display: flex;
   align-items: center;
@@ -17,6 +15,28 @@ const StyledSliderRange = styled.div`
   }
 `;
 
+const sliderRangeStyling = {
+  trackStyle: [
+    {
+      backgroundColor: "var(--color-primary)",
+      height: "5px",
+    },
+  ],
+  railStyle: {
+    backgroundColor: "var(--font-color2)",
+  },
+  handleStyle: [
+    {
+      backgroundColor: "white",
+      borderColor: "white",
+    },
+    {
+      backgroundColor: "white",
+      borderColor: "white",
+    },
+  ],
+};
+
 // Please check https://github.com/react-component/slider#user-content-common-api
 // for all available props.
 const SliderRange = ({
@@ -35,15 +55,12 @@ const SliderRange = ({
   };
 
   return (
-    <StyledSliderRange>
+    <StyledSliderRange className={props.className}>
       <span>{`${minMaxValues[0]}`}</span>
       <Range
         {...props}
-        {...sliderStyling}
+        {...sliderRangeStyling}
         value={props.value.length ? props.value : [defaultMin, defaultMax]}
-        style={{
-          width: "20em",
-        }}
         onChange={onChangeCustom}
       />
       <span>{`${minMaxValues[1]}${

src/views/GameListView.jsx

@@ -304,7 +304,7 @@ const GameListView = () => {
             <li className="duration-filter">
               <span className="filter-title">{t("Duration (mins)")}</span>
               <SliderRange
-                defaultValue={[2, 4]}
+                defaultValue={[15, 90]}
                 min={15}
                 max={90}
                 value={filterCriteria.durations}