Unifies Range Slider in homepage and game edition

src/components/BoardConfig.jsx

@@ -1,16 +1,17 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-
+import { nanoid } from "nanoid";
 import { Form, Field } from "react-final-form";
-import AutoSave from "../ui/formUtils/AutoSave";
-import Label from "../ui/formUtils/Label";
+
 import useBoardConfig from "./useBoardConfig";
 import { ImageField } from "./mediaLibrary";
-import Hint from "../ui/formUtils/Hint";
 
+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";
-import { nanoid } from "nanoid";
 
 const BoardConfigForm = styled.div`
   display: flex;
@@ -74,26 +75,13 @@ const BoardConfig = () => {
             >
               {({ input: { onChange, value } }) => {
                 return (
-                  <Range
+                  <SliderRange
                     defaultValue={[2, 4]}
                     value={value}
                     min={1}
                     max={9}
                     step={1}
-                    marks={{
-                      1: "1",
-                      2: "2",
-                      3: "3",
-                      4: "4",
-                      5: "5",
-                      6: "6",
-                      7: "7",
-                      8: "8",
-                      9: "9+",
-                    }}
-                    style={{ width: "20em" }}
                     onChange={onChange}
-                    dots
                   />
                 );
               }}
@@ -111,20 +99,12 @@ const BoardConfig = () => {
             >
               {({ input: { onChange, value } }) => {
                 return (
-                  <Range
-                    defaultValue={[2, 4]}
+                  <SliderRange
+                    defaultValue={[15, 90]}
                     value={value}
                     min={15}
                     max={90}
-                    step={null}
-                    marks={{
-                      15: "15",
-                      30: "30",
-                      45: "45",
-                      60: "60",
-                      90: "90+",
-                    }}
-                    style={{ width: "20em" }}
+                    step={15}
                     onChange={onChange}
                   />
                 );

src/ui/SliderRange.jsx

@@ -19,8 +19,15 @@ const StyledSliderRange = styled.div`
 
 // Please check https://github.com/react-component/slider#user-content-common-api
 // for all available props.
-const SliderRange = ({ defaultValue: [min, max], ...props }) => {
-  const [minMaxValues, setMinMaxValues] = React.useState([min, max]);
+const SliderRange = ({
+  defaultValue: [defaultMin, defaultMax],
+  plusSignMode = true,
+  ...props
+}) => {
+  const [minMaxValues, setMinMaxValues] = React.useState([
+    props.value.length ? props.value[0] : defaultMin,
+    props.value.length ? props.value[1] : defaultMax,
+  ]);
 
   const onChangeCustom = function (values) {
     setMinMaxValues(values);
@@ -33,14 +40,15 @@ const SliderRange = ({ defaultValue: [min, max], ...props }) => {
       <Range
         {...props}
         {...sliderStyling}
-        min={min}
-        max={max}
+        value={props.value.length ? props.value : [defaultMin, defaultMax]}
         style={{
           width: "20em",
         }}
         onChange={onChangeCustom}
       />
-      <span>{`${minMaxValues[1]}`}</span>
+      <span>{`${minMaxValues[1]}${
+        plusSignMode && minMaxValues[1] == props.max ? "+" : ""
+      }`}</span>
     </StyledSliderRange>
   );
 };

src/views/GameListView.jsx

@@ -294,6 +294,8 @@ const GameListView = () => {
               <span className="filter-title">{t("Number of players")}</span>
               <SliderRange
                 defaultValue={[1, 9]}
+                min={1}
+                max={9}
                 value={filterCriteria.nbOfPlayers}
                 step={1}
                 onChange={onChangeNbOfPlayersSlider}
@@ -302,7 +304,9 @@ const GameListView = () => {
             <li className="duration-filter">
               <span className="filter-title">{t("Duration (mins)")}</span>
               <SliderRange
-                defaultValue={[15, 90]}
+                defaultValue={[2, 4]}
+                min={15}
+                max={90}
                 value={filterCriteria.durations}
                 step={15}
                 onChange={onChangeDurationSlider}