update

components/novel/Settings/index.tsx

@@ -1,11 +1,45 @@
 import clsx from "clsx";
+import SliderUnstyled, {
+  sliderUnstyledClasses,
+} from "@mui/base/SliderUnstyled";
 
 import toggleTheme from "../../../libs/toggleTheme";
 
 import styles from "../../../styles/chapter.module.scss";
+import { useCallback } from "react";
 
-type FontSize = 1 | 2 | 3 | 4 | 5;
-const fontSizes: FontSize[] = [1, 2, 3, 4, 5];
+type FontSize = 12 | 14 | 16 | 18 | 20 | 24;
+const fontSizes: FontSize[] = [12, 14, 16, 18, 20, 24];
+
+const max = Math.max(...fontSizes);
+const min = Math.min(...fontSizes);
+
+const marks = [
+  {
+    value: 12,
+    label: "12px",
+  },
+  {
+    value: 14,
+    label: "14px",
+  },
+  {
+    value: 16,
+    label: "16px",
+  },
+  {
+    value: 18,
+    label: "18px",
+  },
+  {
+    value: 20,
+    label: "20px",
+  },
+  {
+    value: 24,
+    label: "24px",
+  },
+];
 
 interface SettingsProps {
   isSerif: boolean;
@@ -14,9 +48,23 @@ interface SettingsProps {
   changeFontSize: (fontSize: FontSize) => void;
 }
 
+function valuetext(value: number) {
+  return `${value}px`;
+}
+
 const Settings = (props: SettingsProps) => {
   const { isSerif, fontSize, changeIsSerif, changeFontSize } = props;
 
+  const handleChangeFontSize = useCallback(
+    (add = 1) => {
+      const idx = fontSizes.findIndex((fs) => fs === fontSize);
+      changeFontSize(
+        fontSizes[Math.max(0, Math.min(fontSizes.length - 1, idx + add))]
+      );
+    },
+    [changeFontSize, fontSize]
+  );
+
   return (
     <div className={styles["toolbar-inner"]}>
       <div className={styles["toolbar-display-title"]}>Display Options</div>
@@ -61,44 +109,25 @@ const Settings = (props: SettingsProps) => {
         </button>
       </div>
       <div className={styles["toolbar-display-label"]}>Sizes</div>
-      <div className="flex">
-        <button
-          className="mr-4"
-          onClick={() =>
-            changeFontSize(
-              Math.max(Math.min(...fontSizes), fontSize - 1) as FontSize
-            )
-          }
-        >
+      <div className="flex items-center">
+        <button className="mr-4" onClick={() => handleChangeFontSize(-1)}>
           <svg className="w-5 h-5" viewBox="0 0 16 16">
             <use href="/icons.svg#font-dn"></use>
           </svg>
         </button>
-        <input
-          className="w-0 flex-1"
-          type="range"
-          list="tickmarks"
+        <SliderUnstyled
+          aria-label="Font Size"
           value={fontSize}
-          min={1}
-          max={5}
-          step={1}
-          onChange={(e) => changeFontSize(Number(e.target.value) as FontSize)}
+          getAriaValueText={valuetext}
+          step={null}
+          marks={marks}
+          min={min}
+          max={max}
+          className="w-0 flex-1"
+          classes={{ ...styles, root: styles.slider }}
+          onChange={(e, value) => changeFontSize(value as FontSize)}
         />
-        <datalist id="tickmarks">
-          {fontSizes.map((fs) => (
-            <option key={fs} value={fs}>
-              {fs}
-            </option>
-          ))}
-        </datalist>
-        <button
-          className="ml-4"
-          onClick={() =>
-            changeFontSize(
-              Math.min(Math.max(...fontSizes), fontSize + 1) as FontSize
-            )
-          }
-        >
+        <button className="ml-4" onClick={() => handleChangeFontSize(1)}>
           <svg className="w-5 h-5" viewBox="0 0 16 16">
             <use href="/icons.svg#font-up"></use>
           </svg>

pages/novel/[slug]/[chapter].tsx

@@ -41,7 +41,7 @@ const Chapter: NextPageWithLayout = () => {
   const [menu, setMenu] = useState("");
   const [isSerif, setIsSerif] = useState(false);
 
-  const [fontSize, setFontSize] = useState(3);
+  const [fontSize, setFontSize] = useState(16);
 
   const handleOpenToolbar = () => {
     if (open) {
@@ -138,11 +138,12 @@ const Chapter: NextPageWithLayout = () => {
             <div
               className={clsx("content", {
                 ["font-serif"]: isSerif,
-                "text-sm": fontSize === 1,
-                "text-base": fontSize === 2,
-                "text-lg": fontSize === 3,
-                "text-xl": fontSize === 4,
-                "text-2xl": fontSize === 5,
+                "text-xs": fontSize === 12,
+                "text-sm": fontSize === 14,
+                "text-base": fontSize === 16,
+                "text-lg": fontSize === 18,
+                "text-xl": fontSize === 20,
+                "text-2xl": fontSize === 24,
               })}
               dangerouslySetInnerHTML={{ __html: chapterData.content }}
             />

styles/chapter.module.scss

@@ -112,3 +112,54 @@
     }
   }
 }
+
+.slider {
+  @apply h-1 w-full inline-block relative cursor-pointer touch-none text-blue-300;
+
+  &:hover {
+    @apply opacity-100;
+  }
+
+  &.disabled {
+    @apply pointer-events-none cursor-default opacity-50 text-gray-600;
+  }
+
+  & .rail {
+    @apply block absolute w-full h-1 rounded bg-current opacity-40;
+  }
+
+  & .track {
+    @apply block absolute h-1 rounded bg-current;
+  }
+
+  & .thumb {
+    @apply absolute w-5 h-5 -ml-2.5 -mt-2.5 top-1/2 box-border rounded-full outline-0 border-0 border-current bg-white;
+
+    &:hover,
+    &.focusVisible {
+      box-shadow: 0 0 0 0.25rem rgba(147, 196, 253, 0.15);
+      // @apply shadow-blue-300 shadow-md;
+    }
+
+    &.active {
+      box-shadow: 0 0 0 0.25rem rgba(147, 196, 253, 0.3);
+      // @apply shadow-blue-300 shadow-md;
+    }
+  }
+
+  & .mark {
+    @apply absolute w-0.5 h-0.5 rounded bg-current top-1/2 opacity-70 -translate-x-1/2 -translate-y-1/2;
+  }
+
+  & .markActive {
+    @apply bg-blue-900;
+  }
+
+  & .valueLabel {
+    @apply text-sm block relative -top-6 text-center -translate-x-1/2;
+  }
+
+  & .markLabel {
+    @apply text-xs absolute top-3 -translate-x-1/2;
+  }
+}