[kit] Added unit parameter to sliders

Author: EspeuteClement

bin/hidekit.css

@@ -585,6 +585,7 @@ kit-root .detached .is-cdb-editor {
   }
   :scope kit-line kit-slider {
     flex: var(--width, 1) 1;
+    position: relative;
     display: flex;
     height: 22px;
     align-self: flex-start;
@@ -595,6 +596,13 @@ kit-root .detached .is-cdb-editor {
     height: 100%;
     vertical-align: center;
   }
+  :scope kit-line kit-slider kit-unit {
+    right: 14px;
+    color: #666;
+    position: absolute;
+    align-self: center;
+    font-style: italic;
+  }
   :scope kit-line kit-select {
     flex: var(--width, 1) 1;
     cursor: pointer;

bin/hidekit.less

@@ -673,7 +673,7 @@ kit-root {
 
 			kit-slider {
 				flex: var(--width,1) 1;
-
+				position: relative;
 				display: flex;
 
 				>input {
@@ -685,6 +685,14 @@ kit-root {
 
 				height: @widget-height;
 				align-self: flex-start;
+
+				kit-unit {
+					right: 14px;
+					color: #666;
+					position: absolute;
+					align-self: center;
+					font-style: italic;
+				}
 			}
 
 			kit-select {

hide/kit/Slider.hx

@@ -40,6 +40,11 @@ class Slider<T:Float> extends Widget<T> {
 	**/
 	public var int : Bool = false;
 
+	/**
+		If set, a unit will be displayed along the value like this "10.0 m/s"
+	**/
+	public var unit : String = null;
+
 
 	#if js
 	var slider: js.html.InputElement;
@@ -81,6 +86,12 @@ class Slider<T:Float> extends Widget<T> {
 		slider = js.Browser.document.createInputElement();
 		container.append(slider);
 
+		if (unit != null) {
+			var unitElement = js.Browser.document.createElement("kit-unit");
+			container.append(unitElement);
+			unitElement.textContent = unit;
+		}
+
 		if (tooltip == null)
 			slider.title = "Shift : Precise movement\nCtrl : Fast Movement";
 

hrt/prefab/l3d/KitTest.hx

@@ -392,6 +392,7 @@ class KitTest extends Object3D {
 						<slider label="Exp" value={10} exp wrap/> // Exponential curve
 						<slider label="Poly" value={10} poly wrap/> // Polynomial curve
 						<slider label="Int" value={10} int/> // Int Slider
+						<slider label="Unit" value={10.0} unit="m/s"/>
 
 						<separator/>
 						<text("A slider group add a little \"link\" button that allow one slider to change all the other sliders proportionally")/>