add padding when using ticks

haxeui · Mar 30, 2024 · 53b559b · 53b559b
1 parent 605dd2b
commit 53b559b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/haxe/ui/_module/styles/default/sliders.css b/haxe/ui/_module/styles/default/sliders.css
@@ -11,6 +11,11 @@
     border-radius: $normal-border-radius;
 }
 
+.horizontal-slider.major-ticks, .horizontal-slider.minor-ticks {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
 .horizontal-slider:active .button {
     border: 1px solid $accent-color;
 }
@@ -64,6 +69,11 @@
     initial-height: 150px;
 }
 
+.vertical-slider.major-ticks, .vertical-slider.minor-ticks {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
 .vertical-slider:active .button {
     border: 1px solid $accent-color;
 }

diff --git a/haxe/ui/components/Slider.hx b/haxe/ui/components/Slider.hx
@@ -305,6 +305,7 @@ private class MinorTicks extends DataBehaviour {
     public override function validateData() {
         if (_value != null && _value.isNull == false) {
             var slider:Slider = cast(_component, Slider);
+            slider.addClass("minor-ticks");
             var ticks = slider.findComponents("minor-tick", 1);
             var v:Float = _value;
             var m:Float = slider.max - slider.min;
@@ -325,6 +326,7 @@ private class MinorTicks extends DataBehaviour {
                 }
             }
         } else {
+            _component.removeClass("minor-ticks");
         }
     }
 }
@@ -333,6 +335,7 @@ private class MajorTicks extends DataBehaviour {
     public override function validateData() {
         if (_value != null && _value.isNull == false) {
             var slider:Slider = cast(_component, Slider);
+            slider.addClass("major-ticks");
             var ticks = slider.findComponents("major-tick", 1);
             var v:Float = _value;
             var m:Float = slider.max - slider.min;
@@ -353,6 +356,7 @@ private class MajorTicks extends DataBehaviour {
                 }
             }
         } else {
+            _component.removeClass("major-ticks");
         }
     }
 }