From 8b72756b8d987bb7218867dcf690ead46c0dea14 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 16 Apr 2020 10:33:44 +0100
Subject: [PATCH] Use the font slider

---
 .../views/settings/tabs/user/StyleUserSettingsTab.js      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
index e7b7385f5a..d77822ceb7 100644
--- a/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/StyleUserSettingsTab.js
@@ -20,6 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
 import * as sdk from "../../../../../index";
 import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
 import Field from "../../../elements/Field";
+import FontSlider from "../../../../structures/FontSlider";
 
 export default class StyleUserSettingsTab extends React.Component {
     constructor() {
@@ -219,11 +220,18 @@ export default class StyleUserSettingsTab extends React.Component {
     _renderFontSection() {
         return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
+            <FontSlider
+                values={[12,14,16,18,20]}
+                value={this.state.fontSize}
+                updateFontSize={this._onFontSizeChanged}
+                displayFunc={value => value + 'px'}
+            />
             <Field
                 type="text"
                 label={_t("Font size")}
                 autoComplete="off"
                 placeholder={SettingsStore.getValue("font_size", null).toString()}
+                value={this.state.fontSize}
                 id="font_size_field"
                 onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
             />