Add the value bar image

gui/src/2D/controls/imageBasedSlider.ts

@@ -1,4 +1,4 @@
-import { BaseSlider } from "./baseslider";
+import { BaseSlider } from "./baseSlider";
 import { Measure } from "../measure";
 import { Image } from "./image";
 
@@ -34,6 +34,27 @@ export class ImageBasedSlider extends BaseSlider {
     }
 
     /**
+     * Gets or sets the image used to render the value bar
+     */
+    public get valueBarImage(): Image {
+        return this._valueBarImage;
+    }
+
+    public set valueBarImage(value: Image) {
+        if (this._valueBarImage === value) {
+            return;
+        }
+
+        this._valueBarImage = value;
+
+        if (value && !value.isLoaded) {
+            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        }
+
+        this._markAsDirty();
+    }
+
+    /**
      * Gets or sets the image used to render the thumb
      */
     public get thumbImage(): Image {
@@ -96,7 +117,17 @@ export class ImageBasedSlider extends BaseSlider {
 
             // Bar
             if (this._valueBarImage) {
-
+                if (this.isVertical) {
+                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
+                    if (this.isThumbClamped) {
+                        this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, this._currentMeasure.height - thumbPosition);
+                    } else {
+                        this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
+                    }
+                } else {
+                    this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
+                }
+                this._valueBarImage._draw(this._tempMeasure, context);
             }
 
             // Thumb

gui/src/2D/controls/index.ts

@@ -17,7 +17,7 @@ export * from "./textBlock";
 export * from "./virtualKeyboard";
 export * from "./rectangle";
 export * from "./displayGrid";
-export * from "./baseslider";
+export * from "./baseSlider";
 export * from "./slider";
 export * from "./imageBasedSlider";