add sizable trait

crates/core/src/slider.rs

@@ -6,11 +6,11 @@ use gpui::{
     App, Bounds, BoxShadow, DispatchPhase, ElementId, InteractiveElement as _, IntoElement,
     KeyDownEvent, MouseButton, MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels,
     RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Window, canvas,
-    div, px, relative, rems,
+    div, px, relative,
 };
-use gpui_native_theme::ActiveTheme as _;
+use gpui_native_theme::{ActiveTheme as _, Size};
 
-use crate::common::h_flex;
+use crate::common::{Sizable, h_flex};
 
 /// The change reporter, fired with the next value by click, drag, and arrows.
 type ChangeHandler = Rc<dyn Fn(f32, &mut Window, &mut App)>;
@@ -36,6 +36,7 @@ pub struct Slider {
     max: f32,
     step: f32,
     value: f32,
+    size: Size,
     disabled: bool,
     a11y_label: Option<SharedString>,
     on_change: Option<ChangeHandler>,
@@ -53,6 +54,7 @@ impl Slider {
             max: 1.0,
             step: 0.0,
             value,
+            size: Size::default(),
             disabled: false,
             a11y_label: None,
             on_change: None,
@@ -108,12 +110,23 @@ impl Slider {
     }
 }
 
+impl Sizable for Slider {
+    fn apply_size(&mut self, size: Size) {
+        self.size = size;
+    }
+}
+
 impl RenderOnce for Slider {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         let theme = cx.theme();
         let colors = theme.colors;
         let ramps = theme.ramps;
         let radius = theme.radius;
+        let metrics = theme.sizes.resolve(self.size);
+
+        let row_height = metrics.icon_size;
+        let track_height = metrics.icon_size / 4.0;
+        let knob = metrics.icon_size * 1.25;
 
         let value = self.value.clamp(self.min, self.max);
         let fraction = if self.max > self.min {
@@ -162,7 +175,7 @@ impl RenderOnce for Slider {
             .id(self.id)
             .relative()
             .w_full()
-            .h_5()
+            .h(row_height)
             .role(Role::Slider)
             .when_some(self.a11y_label.clone(), |slider, label| {
                 slider.aria_label(label)
@@ -251,8 +264,8 @@ impl RenderOnce for Slider {
                 div()
                     .absolute()
                     .left_0()
-                    .top_2()
-                    .h_1()
+                    .top((row_height - track_height) / 2.0)
+                    .h(track_height)
                     .w_full()
                     .rounded(radius.full)
                     .bg(colors.border),
@@ -261,8 +274,8 @@ impl RenderOnce for Slider {
                 div()
                     .absolute()
                     .left_0()
-                    .top_2()
-                    .h_1()
+                    .top((row_height - track_height) / 2.0)
+                    .h(track_height)
                     .w(relative(fraction))
                     .rounded(radius.full)
                     .bg(ramps.primary.base),
@@ -278,13 +291,13 @@ impl RenderOnce for Slider {
                     .items_center()
                     .child(
                         div()
-                            .size_5()
+                            .size(knob)
                             .flex_none()
                             .rounded(radius.full)
                             .bg(colors.primary_foreground)
                             .border_1()
                             .border_color(colors.border)
-                            .mr(rems(-0.625)),
+                            .mr(-knob / 2.0),
                     ),
             )
     }