diff --git a/res/css/structures/_FontSlider.scss b/res/css/structures/_FontSlider.scss
index fc83bd91bc..2112ac9a88 100644
--- a/res/css/structures/_FontSlider.scss
+++ b/res/css/structures/_FontSlider.scss
@@ -14,20 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_fontSlider {
+.mx_Slider {
     position: relative;
     margin: 0px;
 
     @mixin mx_Settings_fullWidthField;
 }
 
-.mx_fontSlider_dotContainer {
+.mx_Slider_dotContainer {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 
-.mx_fontSlider_bar {
+.mx_Slider_bar {
     display: flex;
     box-sizing: border-box;
     position: absolute;
@@ -37,12 +37,12 @@ limitations under the License.
     align-items: center;
 }
 
-.mx_fontSlider_bar > hr {
+.mx_Slider_bar > hr {
     width: 100%;
     border: 0.2rem solid $fontSlider-background-color;
 }
 
-.mx_fontSlider_selection {
+.mx_Slider_selection {
     display: flex;
     align-items: center;
     width: calc(100% - 2.2rem);
@@ -50,7 +50,7 @@ limitations under the License.
     position: absolute;
 }
 
-.mx_fontSlider_selectionDot {
+.mx_Slider_selectionDot {
     transition: left 0.25s;
     position: absolute;
     width: 1.1rem;
@@ -61,13 +61,13 @@ limitations under the License.
     z-index: 10;
 }
 
-.mx_fontSlider_selection > hr {
+.mx_Slider_selection > hr {
     transition: width 0.25s;
     margin: 0;
     border: 0.2rem solid $fontSlider-selection-color;
 }
 
-.mx_fontSlider_dot {
+.mx_Slider_dot {
     transition: background-color 0.2s ease-in;
     height: 1rem;
     width: 1rem;
@@ -77,11 +77,11 @@ limitations under the License.
     z-index: 0;
 }
 
-.mx_fontSlider_dotActive {
+.mx_Slider_dotActive {
     background-color: $fontSlider-selection-color;
 }
 
-.mx_fontSlider_dotValue {
+.mx_Slider_dotValue {
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/components/structures/FontSlider.tsx b/src/components/structures/FontSlider.tsx
index 9048e7b37b..7985fa206a 100644
--- a/src/components/structures/FontSlider.tsx
+++ b/src/components/structures/FontSlider.tsx
@@ -18,8 +18,8 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 
 type SliderProps = {
-        // A callback for the new value onclick
-        updateFontSize: (size: number) => null;
+        // A callback for the selected value
+        onSelectionChange: (value: number) => null;
 
         // The current value of the slider
         value: number;
@@ -37,7 +37,7 @@ export default class Slider extends React.Component<SliderProps> {
     static propTypes = {
 
         // A callback for the new value onclick
-        updateFontSize: PropTypes.func,
+        onSelectionChange: PropTypes.func,
 
         // The current value of the slider
         value: PropTypes.number,
@@ -59,22 +59,22 @@ export default class Slider extends React.Component<SliderProps> {
         const dots = this.props.values.map(v =>
             <Dot active={v<=this.props.value}
                  label={this.props.displayFunc(v)}
-                 onClick={() => this.props.updateFontSize(v)}
+                 onClick={() => this.props.onSelectionChange(v)}
                  key={v}
             />);
 
         const offset = this._offset(this.props.values, this.props.value);
 
-        return <div className="mx_fontSlider">
+        return <div className="mx_Slider">
             <div>
-                <div className="mx_fontSlider_bar">
+                <div className="mx_Slider_bar">
                     <hr />
-                    <div className="mx_fontSlider_selection">
-                        <div className="mx_fontSlider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
+                    <div className="mx_Slider_selection">
+                        <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
                         <hr style={{width: offset + "%"}} />
                     </div>
                 </div>
-                <div className="mx_fontSlider_dotContainer">
+                <div className="mx_Slider_dotContainer">
                     {dots}
                 </div>
             </div>
@@ -106,9 +106,9 @@ class Dot extends React.Component<DotProps> {
     }
 
     render(): React.ReactNode {
-        const className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
+        const className = "mx_Slider_dot" + (this.props.active? " mx_Slider_dotActive": "");
 
-        return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue">
+        return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
             <div className={className} />
             <div>
                 {this.props.label}