Polish SliderWidget:

- Keep thumb within the EventBounds.
- Fix tick rendering.

OpenRA.Game/Widgets/SliderWidget.cs

@@ -82,8 +82,8 @@ namespace OpenRA.Widgets
 			return ThumbRect.Contains(mi.Location);
 		}
 
-		float ValueFromPx(int x) { return MinimumValue + (MaximumValue - MinimumValue) * (1f * x / RenderBounds.Width); }
+		float ValueFromPx(int x) { return MinimumValue + (MaximumValue - MinimumValue) * (x - 0.5f * RenderBounds.Height) / (RenderBounds.Width - RenderBounds.Height); }
-		protected int PxFromValue(float x) { return (int)(RenderBounds.Width * (x - MinimumValue) / (MaximumValue - MinimumValue)); }
+		protected int PxFromValue(float x) { return (int)(0.5f * RenderBounds.Height + (RenderBounds.Width - RenderBounds.Height) * (x - MinimumValue) / (MaximumValue - MinimumValue)); }
 
 		public override Widget Clone() { return new SliderWidget(this); }
 
@@ -109,16 +109,19 @@ namespace OpenRA.Widgets
 
 			var tr = ThumbRect;
 			var rb = RenderBounds;
-			var trackWidth = rb.Width;
+			var trackWidth = rb.Width - rb.Height;
-			var trackOrigin = rb.X;
+			var trackOrigin = rb.X + rb.Height / 2;
 			var trackRect = new Rectangle(trackOrigin - 1, rb.Y + (rb.Height - TrackHeight) / 2, trackWidth + 2, TrackHeight);
 
-			// Tickmarks (hacked until we have real art)
+			// Tickmarks
+			var tick = ChromeProvider.GetImage("slider", "tick");
 			for (int i = 0; i < Ticks; i++)
 			{
-				var tickRect = new Rectangle(trackOrigin - 1 + (int)(i * trackWidth * 1f / (Ticks - 1)),
+				var tickPos = new float2(
-						  rb.Y + rb.Height / 2, 2, rb.Height / 2);
+					trackOrigin + (i * (trackRect.Width - (int)tick.size.X) / (Ticks - 1)) - tick.size.X / 2,
-				WidgetUtils.DrawPanel("slider-tick", tickRect);
+					trackRect.Bottom);
+
+				WidgetUtils.DrawRGBA(tick, tickPos);
 			}
 
 			// Track

mods/cnc/chrome.yaml

@@ -251,17 +251,8 @@ scrollitem-selected: chrome.png
 	corner-bl: 64,254,2,2
 	corner-br: 126,254,2,2
 
-# A copy of panel-gray
+slider: chrome.png
-slider-tick: chrome.png
+	tick: 64,64,1,4
-	background: 66,66,60,60
-	border-r: 126,66,2,60
-	border-l: 64,66,2,60
-	border-b: 66,126,60,2
-	border-t: 66,64,60,2
-	corner-tl: 64,64,2,2
-	corner-tr: 126,64,2,2
-	corner-bl: 64,126,2,2
-	corner-br: 126,126,2,2
 
 # A copy of panel-gray
 slider-track: chrome.png

mods/d2k/chrome.yaml

@@ -492,18 +492,8 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1
 
-
+slider: dialog.png
-# A copy of dialog2 (normal button)
+	tick: 512,1,2,4
-slider-tick: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
 
 # A copy of dialog3 (pressed button)
 slider-track: dialog.png

mods/ra/chrome.yaml

@@ -442,17 +442,8 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1
 
-# A copy of dialog2 (normal button)
+slider: dialog.png
-slider-tick: dialog.png
+	tick: 512,1,2,4
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
 
 # A copy of dialog3 (pressed button)
 slider-track: dialog.png

mods/ts/chrome.yaml

@@ -436,18 +436,8 @@ scrollpanel-bg: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1
 
-
+slider: dialog.png
-# A copy of dialog2 (normal button)
+	tick: 512,1,1,4
-slider-tick: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
 
 # A copy of dialog3 (pressed button)
 slider-track: dialog.png