Slider: correct rail/track geometry to account for thumb size (#9449)

- Shift rail by half-thumb and shrink by thumb size (H/V)
- Size track using thumb center (width = thumb.x, height = thumb.y)
- Clamp thumb position against parent size instead of root
- Visual fill now matches interaction range
- Apply consistently to Cosmic, Cupertino, Fluent, Material
- Note: Qt backend not updated; still misaligned

Author: task-jp

internal/compiler/widgets/cosmic/slider.slint

@@ -36,24 +36,26 @@ export component Slider {
     ]
 
     rail := Rectangle {
-        width: base.vertical ? 4px : parent.width;
-        height: base.vertical ? parent.height : 4px;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? 4px : parent.width - thumb.width;
+        height: base.vertical ? parent.height - thumb.height : 4px;
         background: CosmicPalette.neutral-6-background;
         border-radius: 2px;
     }
 
     track := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : 0;
-        y: base.vertical ? 0 : (parent.height - self.height) / 2;
-        width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
-        height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? rail.width : thumb.x;
+        height: base.vertical ? thumb.y : rail.height;
         background: CosmicPalette.secondary-accent-background;
         border-radius: rail.border-radius;
     }
 
     thumb := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
-        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
+        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.width - self.width);
+        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.height - self.height) : (parent.height - self.height) / 2;
         width: 20px;
         height: self.width;
         border-radius: 10px;

internal/compiler/widgets/cupertino/slider.slint

@@ -38,8 +38,10 @@ export component Slider {
     ]
 
     rail := Rectangle {
-        width: base.vertical ? 4px : parent.width;
-        height: base.vertical ? parent.height : 4px;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? 4px : parent.width - thumb.width;
+        height: base.vertical ? parent.height - thumb.height : 4px;
         background: CupertinoPalette.alternate-control-background;
         border-radius: 2px;
 
@@ -51,17 +53,17 @@ export component Slider {
     }
 
     track := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : 0;
-        y: base.vertical ? 0 : (parent.height - self.height) / 2;
-        width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
-        height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? rail.width : thumb.x;
+        height: base.vertical ? thumb.y : rail.height;
         background: CupertinoPalette.accent-background;
         border-radius: rail.border-radius;
     }
 
     thumb := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
-        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
+        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.width - self.width);
+        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.height - self.height) : (parent.height - self.height) / 2;
         width: 20px;
         height: self.width;
         border-radius: 10px;

internal/compiler/widgets/fluent/slider.slint

@@ -46,24 +46,26 @@ export component Slider {
     ]
 
     rail := Rectangle {
-        width: base.vertical ? 4px : parent.width;
-        height: base.vertical ? parent.height : 4px;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? 4px : parent.width - thumb.width;
+        height: base.vertical ? parent.height - thumb.height : 4px;
         background: FluentPalette.border;
         border-radius: 2px;
     }
 
     track := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : 0;
-        y: base.vertical ? 0 : (parent.height - self.height) / 2;
-        width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
-        height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
+        x: base.vertical ? (parent.width - self.width) / 2 : thumb.width / 2;
+        y: base.vertical ? thumb.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? rail.width : thumb.x;
+        height: base.vertical ? thumb.y : rail.height;
         background: FluentPalette.accent-background;
         border-radius: rail.border-radius;
     }
 
     thumb := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
-        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
+        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.width - self.width);
+        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.height - self.height) : (parent.height - self.height) / 2;
         width: 20px;
         height: self.width;
         border-radius: 10px;

internal/compiler/widgets/material/slider.slint

@@ -49,19 +49,19 @@ export component Slider {
     background := Rectangle {
         background: MaterialPalette.control-background-variant;
         opacity: 0.38;
-        x: (parent.width - self.width) / 2;
-        y: (parent.height - self.height) / 2;
-        width: base.vertical ? 4px : parent.width;
-        height: base.vertical ? parent.height : 4px;
+        x: base.vertical ? (parent.width - self.width) / 2 : handle.width / 2;
+        y: base.vertical ? handle.height / 2 : (parent.height - self.height) / 2;
+        width: base.vertical ? 4px : parent.width - handle.width;
+        height: base.vertical ? parent.height - handle.height : 4px;
         border-radius: 2px;
     }
 
     track := Rectangle {
         background: MaterialPalette.accent-background;
         x: base.vertical ? (parent.width - self.width) / 2 : background.x;
         y: base.vertical ? background.y : (parent.height - self.height) / 2;
-        width: base.vertical? background.width : handle.x + (handle.width / 2);
-        height: base.vertical? handle.y + (handle.height / 2) : background.height;
+        width: base.vertical? background.width : handle.x;
+        height: base.vertical? handle.y : background.height;
         border-radius: background.border-radius;
     }
 
@@ -78,8 +78,8 @@ export component Slider {
     }
 
     handle := Rectangle {
-        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
-        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
+        x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.width - self.width);
+        y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, parent.height - self.height) : (parent.height - self.height) / 2;
         background: MaterialPalette.accent-background;
         width: base.vertical ? root.width : root.height;
         height: base.vertical ? root.width : root.height;