font size slider

dev.Dockerfile

@@ -2,6 +2,7 @@ FROM node:18
 
 WORKDIR /app
 COPY package.json yarn.lock ./
+RUN yarn config set "strict-ssl" false -g
 RUN yarn
 
 WORKDIR /app/excalidraw-app

excalidraw-app/index.scss

@@ -115,3 +115,23 @@
     }
   }
 }
+
+.our-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 1rem;
+  background: var(--color-slider-track);
+  outline: none;
+}
+
+.our-slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 16.5px;
+  height: 16.5px;
+  border-radius: 100%;
+  background: #444;
+  cursor: pointer;
+}

packages/excalidraw/actions/actionProperties.tsx

@@ -666,6 +666,83 @@ export const actionChangeFontSize = register({
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <fieldset>
       <legend>{t("labels.fontSize")}</legend>
+      {/* New slider */}
+      <input 
+        type="range" 
+        className="our-slider"
+        min="16" 
+        max="36" 
+        step="1"
+        value={
+          getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontSize;
+              }
+              const boundTextElement = getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              );
+              return boundTextElement?.fontSize ?? null;
+            },
+            (element) =>
+              isTextElement(element) ||
+              getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              ) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+          ) ?? DEFAULT_FONT_SIZE // 👈 Add this fallback
+        }
+        onChange={(event) => {
+          const fontSize = parseInt(event.target.value, 10);
+          updateData(fontSize);
+        }}
+      />
+{/* 
+      <Range
+        elements={elements}
+        appState={appState}
+        updateData={(value) => updateData(Number(value))}
+        getValue={() =>
+          getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontSize;
+              }
+              const boundTextElement = getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              );
+              return boundTextElement?.fontSize ?? null;
+            },
+            (element) =>
+              isTextElement(element) ||
+              getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              ) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+          ) ?? DEFAULT_FONT_SIZE
+        }
+        label={t("labels.fontSize")}
+        min={12}
+        max={64}
+        step={1}
+        testId="font-size"
+      /> */}
+
+      {/* Old buttons */}
       <ButtonIconSelect
         group="font-size"
         options={[