diff --git a/frontend/src/ts/elements/settings/settings-group.ts b/frontend/src/ts/elements/settings/settings-group.ts
index 832c60f0743e..cee3dab3ed93 100644
--- a/frontend/src/ts/elements/settings/settings-group.ts
+++ b/frontend/src/ts/elements/settings/settings-group.ts
@@ -206,20 +206,22 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
     const newValue = valueOverride ?? (Config[this.configName] as T);
 
     if (this.mode === "select") {
-      const select = this.elements?.[0] as HTMLSelectElement | null | undefined;
+      const select = this.elements?.[0] as
+        | ElementWithUtils<HTMLSelectElement>
+        | undefined;
       if (!select) {
         return;
       }
 
       //@ts-expect-error this is fine, slimselect adds slim to the element
-      const ss = select.slim as SlimSelect | undefined;
+      const ss = select.native.slim as SlimSelect | undefined;
       if (ss !== undefined) {
         const currentSelected = ss.getSelected()[0] ?? null;
         if (newValue !== currentSelected) {
           ss.setSelected(newValue as string);
         }
       } else {
-        if (select.value !== newValue) select.value = newValue as string;
+        if (select.getValue() !== newValue) select.setValue(newValue as string);
       }
     } else if (this.mode === "button") {
       for (const button of this.elements) {
@@ -236,9 +238,11 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
         }
       }
     } else if (this.mode === "range") {
-      const range = this.elements?.[0] as HTMLInputElement | null | undefined;
+      const range = this.elements?.[0] as
+        | ElementWithUtils<HTMLInputElement>
+        | undefined;
 
-      const rangeValue = document.querySelector(
+      const rangeValue = qs(
         `.pageSettings .section[data-config-name='${this.configName}'] .value`,
       );
 
@@ -246,8 +250,8 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
         return;
       }
 
-      range.value = newValue as unknown as string;
-      rangeValue.textContent = `${(newValue as number).toFixed(1)}`;
+      range.setValue(newValue as unknown as string);
+      rangeValue.setText(`${(newValue as number).toFixed(1)}`);
     }
     if (this.updateCallback) this.updateCallback();
   }