diff --git a/Build/types/TYPO3/index.d.ts b/Build/types/TYPO3/index.d.ts
index d5c2ec10887e7f510b020fe4d20fa8ca2aa787c8..4ce0c03176fa5ac3e33429f1b7502084f8b407f4 100644
--- a/Build/types/TYPO3/index.d.ts
+++ b/Build/types/TYPO3/index.d.ts
@@ -31,6 +31,10 @@ declare namespace TYPO3 {
   }
 }
 
+declare namespace TBE_EDITOR {
+  export let fieldChanged: Function;
+}
+
 /**
  * Current AMD/RequireJS modules are returning *instances* of ad-hoc *classes*, make that known to TypeScript
  */
@@ -92,4 +96,7 @@ interface JQuery {
   clearable(options?: any): JQuery;
   datetimepicker(options?: any): JQuery;
   dragUploader(options?: DragUploaderOptions): JQuery;
+
+  // To be able to use twbs/bootstrap-slider we have to override the definition of jquerui
+  slider(options: { [key: string]: any }): any;
 }
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts b/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1aefb5775ccd01c940487d2cfa3347521b347291
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts
@@ -0,0 +1,82 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import * as $ from 'jquery';
+import 'twbs/bootstrap-slider';
+
+interface UpdatedValue {
+  oldValue: number;
+  newValue: number;
+}
+
+interface ValueSliderUpdateEvent extends JQueryEventObject {
+  value: UpdatedValue;
+}
+
+class ValueSlider {
+  private id: string; // internally set by the renderTooltipValue callback
+  private selector: string = '[data-slider-id]';
+
+  /**
+   * Update value of slider element
+   *
+   * @param {ValueSliderUpdateEvent} e
+   */
+  private static updateValue(e: ValueSliderUpdateEvent): void {
+    const $slider = $(e.currentTarget);
+    const $foreignField = $('[data-formengine-input-name="' + $slider.data('sliderItemName') + '"]');
+    const sliderCallbackParams = $slider.data('sliderCallbackParams');
+
+    $foreignField.val(e.value.newValue);
+    TBE_EDITOR.fieldChanged.apply(TBE_EDITOR, sliderCallbackParams);
+  }
+
+  constructor() {
+    this.initializeSlider();
+  }
+
+  /**
+   * Initialize all slider elements
+   */
+  private initializeSlider(): void {
+    const $sliders = $(this.selector);
+    if ($sliders.length > 0) {
+      $sliders.slider({
+        formatter: this.renderTooltipValue
+      });
+      $sliders.on('change', ValueSlider.updateValue);
+    }
+  }
+
+  /**
+   * @param {string} value
+   * @returns {string | number}
+   */
+  private renderTooltipValue(value: string): any {
+    let renderedValue;
+    const $slider = $('[data-slider-id="' + this.id + '"]');
+    const data = $slider.data();
+    switch (data.sliderValueType) {
+      case 'double':
+        renderedValue = parseFloat(value).toFixed(2);
+        break;
+      case 'int':
+      default:
+        renderedValue = parseInt(value, 10);
+    }
+
+    return renderedValue;
+  }
+}
+
+export = new ValueSlider();
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js b/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
index 992382392c3152035514b8faac73c4c92262930f..7b91c7d1444a8963a8bb9ee50a9b97c51cc7b24c 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
@@ -10,76 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Implementation of the value slider for input text elements.
- *
- * Module: TYPO3/CMS/Backend/ValueSlider
- */
-define(['jquery', 'twbs/bootstrap-slider'], function($) {
-  /**
-   * ValueSlider object
-   *
-   * @type {{selector: string}}
-   * @exports TYPO3/CMS/Backend/ValueSlider
-   */
-  var ValueSlider = {
-    selector: '[data-slider-id]'
-  };
-
-  /**
-   * Initialize all slider elements
-   */
-  ValueSlider.initializeSlider = function() {
-    var $sliders = $(ValueSlider.selector);
-    if ($sliders.length > 0) {
-      $sliders.slider({
-        formatter: ValueSlider.renderTooltipValue
-      });
-      $sliders.on('change', ValueSlider.updateValue);
-    }
-  };
-
-  /**
-   * Update value of slider element
-   *
-   * @param {Event} e
-   */
-  ValueSlider.updateValue = function(e) {
-    var $slider = $(e.currentTarget),
-      $foreignField = $('[data-formengine-input-name="' + $slider.data('sliderItemName') + '"]'),
-      sliderField = $slider.data('sliderField'),
-      sliderCallbackParams = $slider.data('sliderCallbackParams');
-
-    $foreignField.val(e.value.newValue);
-    TBE_EDITOR.fieldChanged.apply(TBE_EDITOR, sliderCallbackParams);
-  };
-
-  /**
-   *
-   * @param {Number} value
-   * @returns {*}
-   */
-  ValueSlider.renderTooltipValue = function(value) {
-    var renderedValue,
-      $slider = $('[data-slider-id="' + this.id + '"]'),
-      data = $slider.data();
-    switch (data.sliderValueType) {
-      case 'double':
-        renderedValue = parseFloat(value).toFixed(2);
-        break;
-      case 'int':
-      default:
-        renderedValue = parseInt(value);
-    }
-
-    return renderedValue;
-  };
-
-  // init if document is ready
-  $(document).ready(function() {
-    ValueSlider.initializeSlider();
-  });
-
-  return ValueSlider;
-});
+define(["require","exports","jquery","twbs/bootstrap-slider"],function(e,t,a){"use strict";return new(function(){function e(){this.selector="[data-slider-id]",this.initializeSlider()}return e.updateValue=function(e){var t=a(e.currentTarget),i=a('[data-formengine-input-name="'+t.data("sliderItemName")+'"]'),r=t.data("sliderCallbackParams");i.val(e.value.newValue),TBE_EDITOR.fieldChanged.apply(TBE_EDITOR,r)},e.prototype.initializeSlider=function(){var t=a(this.selector);t.length>0&&(t.slider({formatter:this.renderTooltipValue}),t.on("change",e.updateValue))},e.prototype.renderTooltipValue=function(e){var t;switch(a('[data-slider-id="'+this.id+'"]').data().sliderValueType){case"double":t=parseFloat(e).toFixed(2);break;case"int":default:t=parseInt(e,10)}return t},e}())});
\ No newline at end of file