From 8f0d81e7708a1d210b37f1b70824d7cfd19c3806 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 23 Apr 2020 10:27:41 +0100
Subject: [PATCH] Linearly interpolate between value intervals.

---
 src/components/views/elements/Slider.tsx      | 36 ++++++++++++++++---
 .../tabs/user/AppearanceUserSettingsTab.js    |  2 +-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index ad859bfe82..a9fc41c8cc 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -35,14 +35,40 @@ type IProps = {
 }
 
 export default class Slider extends React.Component<IProps> {
+    // offset is a terrible inverse approximation.
+    // if the values represents some function f(x) = y where x is the 
+    // index of the array and y = values[x] then offset(f, y) = x
+    // s.t f(x) = y.
+    // it assumes a monotonic function and interpolates linearly between
+    // y values.
+    // Offset is used for finding the location of a value on a
+    // non linear slider.
     _offset(values: number[], value: number): number {
-        const min = values[0];
-        const max = values[values.length - 1];
+        // the index of the first number greater than value.
+        let closest = values.reduce((prev, curr) => {
+            return (value > curr ? prev + 1 : prev);
+          }, 0);
 
-        // Clamp value between min and max
-        value = Math.min(Math.max(value, min), max);
+        // Off the left
+        if (closest == 0) {
+            return 0;
+        }
+
+        // Off the right
+        if (closest == values.length) {
+            return 100;
+        }
+
+        // Now 
+        const closestLessValue = values[closest - 1];
+        const closestGreaterValue = values[closest];
+
+        const intervalWidth = 1 / (values.length - 1);
+
+        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+
+        return 100 * (closest - 1 + linearInterpolation) * intervalWidth
 
-        return (value - min) / (max - min) * 100;
     }
 
     render(): React.ReactNode {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index e1bbaab2cc..949b3bed31 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -229,7 +229,7 @@ export default class StyleUserSettingsTab extends React.Component {
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
-                    values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max"), 2)}
+                    values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max") + 2, 2.5)}
                     value={this.state.fontSize}
                     onSelectionChange={this._onFontSizeChanged}
                     displayFunc={value => {}}