diff --git a/Assets/Icons/chevron-down_dark.svg b/Assets/Icons/chevron-down_dark.svg
new file mode 100644
index 0000000..31b13f0
--- /dev/null
+++ b/Assets/Icons/chevron-down_dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/chevron-down_dark.svg.import b/Assets/Icons/chevron-down_dark.svg.import
new file mode 100644
index 0000000..743dc45
--- /dev/null
+++ b/Assets/Icons/chevron-down_dark.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://bxskuj6mjctt0"
+path="res://.godot/imported/chevron-down_dark.svg-fe36ecb29c503500628a9ecb67d7cd69.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/chevron-down_dark.svg"
+dest_files=["res://.godot/imported/chevron-down_dark.svg-fe36ecb29c503500628a9ecb67d7cd69.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/chevron-down_grayscale.svg b/Assets/Icons/chevron-down_grayscale.svg
new file mode 100644
index 0000000..251d3e7
--- /dev/null
+++ b/Assets/Icons/chevron-down_grayscale.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/chevron-down_grayscale.svg.import b/Assets/Icons/chevron-down_grayscale.svg.import
new file mode 100644
index 0000000..430e86f
--- /dev/null
+++ b/Assets/Icons/chevron-down_grayscale.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://couf8n1thmgqk"
+path="res://.godot/imported/chevron-down_grayscale.svg-02f7a486dacf16eba454ba4c56b0cf44.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/chevron-down_grayscale.svg"
+dest_files=["res://.godot/imported/chevron-down_grayscale.svg-02f7a486dacf16eba454ba4c56b0cf44.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/chevron-up.svg b/Assets/Icons/chevron-up.svg
new file mode 100644
index 0000000..3069b96
--- /dev/null
+++ b/Assets/Icons/chevron-up.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/chevron-up.svg.import b/Assets/Icons/chevron-up.svg.import
new file mode 100644
index 0000000..9cb5735
--- /dev/null
+++ b/Assets/Icons/chevron-up.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dg8jmgc2bcbeh"
+path="res://.godot/imported/chevron-up.svg-5dc5e9cdc34bc223615780b493e393e7.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/chevron-up.svg"
+dest_files=["res://.godot/imported/chevron-up.svg-5dc5e9cdc34bc223615780b493e393e7.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/chevron-up_dark.svg b/Assets/Icons/chevron-up_dark.svg
new file mode 100644
index 0000000..b844c63
--- /dev/null
+++ b/Assets/Icons/chevron-up_dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/chevron-up_dark.svg.import b/Assets/Icons/chevron-up_dark.svg.import
new file mode 100644
index 0000000..8149a72
--- /dev/null
+++ b/Assets/Icons/chevron-up_dark.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cmdipq88xmc4a"
+path="res://.godot/imported/chevron-up_dark.svg-dcda86b6613fa86b5c83eb0836d92b13.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/chevron-up_dark.svg"
+dest_files=["res://.godot/imported/chevron-up_dark.svg-dcda86b6613fa86b5c83eb0836d92b13.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/chevron-up_grayscale.svg b/Assets/Icons/chevron-up_grayscale.svg
new file mode 100644
index 0000000..468caca
--- /dev/null
+++ b/Assets/Icons/chevron-up_grayscale.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/chevron-up_grayscale.svg.import b/Assets/Icons/chevron-up_grayscale.svg.import
new file mode 100644
index 0000000..fdc0c6a
--- /dev/null
+++ b/Assets/Icons/chevron-up_grayscale.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://bbtfmtb4xxrpi"
+path="res://.godot/imported/chevron-up_grayscale.svg-1ef45b85e952ab110d49d58edc6659dc.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/chevron-up_grayscale.svg"
+dest_files=["res://.godot/imported/chevron-up_grayscale.svg-1ef45b85e952ab110d49d58edc6659dc.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/grabber.svg b/Assets/Icons/grabber.svg
new file mode 100644
index 0000000..9d48a1f
--- /dev/null
+++ b/Assets/Icons/grabber.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/grabber.svg.import b/Assets/Icons/grabber.svg.import
new file mode 100644
index 0000000..2cc1758
--- /dev/null
+++ b/Assets/Icons/grabber.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cclhwqxyb3hev"
+path="res://.godot/imported/grabber.svg-5bbaaff74062a94713192c7a76195634.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/grabber.svg"
+dest_files=["res://.godot/imported/grabber.svg-5bbaaff74062a94713192c7a76195634.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/grabber_16x16.svg b/Assets/Icons/grabber_16x16.svg
new file mode 100644
index 0000000..116a30d
--- /dev/null
+++ b/Assets/Icons/grabber_16x16.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/Assets/Icons/grabber_16x16.svg.import b/Assets/Icons/grabber_16x16.svg.import
new file mode 100644
index 0000000..286e4cf
--- /dev/null
+++ b/Assets/Icons/grabber_16x16.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://bhyaa5h8x43qg"
+path="res://.godot/imported/grabber_16x16.svg-c4a4f003a977fdc06fa876b726bccc4c.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/grabber_16x16.svg"
+dest_files=["res://.godot/imported/grabber_16x16.svg-c4a4f003a977fdc06fa876b726bccc4c.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/grabber_16x16_active.svg b/Assets/Icons/grabber_16x16_active.svg
new file mode 100644
index 0000000..eaac3a8
--- /dev/null
+++ b/Assets/Icons/grabber_16x16_active.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/Assets/Icons/grabber_16x16_active.svg.import b/Assets/Icons/grabber_16x16_active.svg.import
new file mode 100644
index 0000000..36a4612
--- /dev/null
+++ b/Assets/Icons/grabber_16x16_active.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://btq4ki22avyd2"
+path="res://.godot/imported/grabber_16x16_active.svg-9a5a1e1e807dfc3dc7ca8b5e517cd199.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/grabber_16x16_active.svg"
+dest_files=["res://.godot/imported/grabber_16x16_active.svg-9a5a1e1e807dfc3dc7ca8b5e517cd199.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Assets/Icons/grabber_16x16_grayscale.svg b/Assets/Icons/grabber_16x16_grayscale.svg
new file mode 100644
index 0000000..2bc8b2b
--- /dev/null
+++ b/Assets/Icons/grabber_16x16_grayscale.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Assets/Icons/grabber_16x16_grayscale.svg.import b/Assets/Icons/grabber_16x16_grayscale.svg.import
new file mode 100644
index 0000000..bc464ff
--- /dev/null
+++ b/Assets/Icons/grabber_16x16_grayscale.svg.import
@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cpwd364af8dqj"
+path="res://.godot/imported/grabber_16x16_grayscale.svg-2ecb404cfc96fa8f094b8d9043699377.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/grabber_16x16_grayscale.svg"
+dest_files=["res://.godot/imported/grabber_16x16_grayscale.svg-2ecb404cfc96fa8f094b8d9043699377.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false
diff --git a/Scenes/Styles/BrowserText.tres b/Scenes/Styles/BrowserText.tres
index 61f5f0c..4f7fe68 100644
--- a/Scenes/Styles/BrowserText.tres
+++ b/Scenes/Styles/BrowserText.tres
@@ -1,12 +1,15 @@
-[gd_resource type="Theme" load_steps=36 format=3 uid="uid://bn6rbmdy60lhr"]
+[gd_resource type="Theme" load_steps=42 format=3 uid="uid://bn6rbmdy60lhr"]
[ext_resource type="Texture2D" uid="uid://dn4dxn8hkrd64" path="res://Assets/Icons/checkbox.svg" id="1_75mhk"]
[ext_resource type="Texture2D" uid="uid://b6ucuyluuw43" path="res://Assets/Icons/checkbox_pressed_grayscale.svg" id="2_2abar"]
[ext_resource type="Texture2D" uid="uid://c5scqw224r2e5" path="res://Assets/Icons/checkbox_pressed.svg" id="2_3k2jb"]
[ext_resource type="Texture2D" uid="uid://b2v8ee23580c3" path="res://Assets/Icons/radio.svg" id="3_3weog"]
+[ext_resource type="Texture2D" uid="uid://bhyaa5h8x43qg" path="res://Assets/Icons/grabber_16x16.svg" id="3_88j74"]
+[ext_resource type="Texture2D" uid="uid://cpwd364af8dqj" path="res://Assets/Icons/grabber_16x16_grayscale.svg" id="4_0an8v"]
[ext_resource type="Texture2D" uid="uid://bap17ryrkcyey" path="res://Assets/Icons/checkbox_disabled.svg" id="4_c32on"]
[ext_resource type="Texture2D" uid="uid://y1xqfcd8ro5t" path="res://Assets/Icons/radio_checked_grayscale.svg" id="4_n77xs"]
[ext_resource type="Texture2D" uid="uid://bj7bpovnm25ml" path="res://Assets/Icons/radio_checked.svg" id="4_sesrd"]
+[ext_resource type="Texture2D" uid="uid://btq4ki22avyd2" path="res://Assets/Icons/grabber_16x16_active.svg" id="5_4akvr"]
[ext_resource type="Texture2D" uid="uid://bs414mrvwdmcn" path="res://Assets/Icons/radio_disabled.svg" id="6_r011l"]
[ext_resource type="Texture2D" uid="uid://ckirjsfw1b64a" path="res://Assets/Icons/checkbox_pressed_16x16.svg" id="10_luhv8"]
[ext_resource type="Texture2D" uid="uid://b3y601mvq1suc" path="res://Assets/Icons/pipette.svg" id="11_88j74"]
@@ -36,6 +39,32 @@ corner_radius_bottom_left = 4
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_75mhk"]
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_2awy5"]
+bg_color = Color(0.247059, 0.466667, 0.807843, 1)
+corner_radius_top_left = 25
+corner_radius_top_right = 25
+corner_radius_bottom_right = 25
+corner_radius_bottom_left = 25
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_hcg1v"]
+bg_color = Color(0.309804, 0.517647, 0.839216, 1)
+corner_radius_top_left = 25
+corner_radius_top_right = 25
+corner_radius_bottom_right = 25
+corner_radius_bottom_left = 25
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_7qwau"]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+bg_color = Color(0.184314, 0.184314, 0.184314, 1)
+corner_radius_top_left = 4
+corner_radius_top_right = 4
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
+corner_detail = 6
+
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_jecr6"]
content_margin_left = 5.0
bg_color = Color(0.6, 0.6, 0.6, 0)
@@ -155,6 +184,12 @@ CheckBox/icons/unchecked = ExtResource("1_75mhk")
CheckBox/icons/unchecked_disabled = ExtResource("4_c32on")
CheckBox/styles/focus = SubResource("StyleBoxEmpty_75mhk")
ColorPicker/icons/screen_picker = ExtResource("11_88j74")
+HSlider/icons/grabber = ExtResource("3_88j74")
+HSlider/icons/grabber_disabled = ExtResource("4_0an8v")
+HSlider/icons/grabber_highlight = ExtResource("5_4akvr")
+HSlider/styles/grabber_area = SubResource("StyleBoxFlat_2awy5")
+HSlider/styles/grabber_area_highlight = SubResource("StyleBoxFlat_hcg1v")
+HSlider/styles/slider = SubResource("StyleBoxFlat_7qwau")
LineEdit/colors/caret_color = Color(0, 0, 0, 1)
LineEdit/colors/font_color = Color(0, 0, 0, 1)
LineEdit/colors/font_placeholder_color = Color(0, 0, 0, 0.6)
diff --git a/Scenes/Tags/input.tscn b/Scenes/Tags/input.tscn
index 33aace4..f8bdbd1 100644
--- a/Scenes/Tags/input.tscn
+++ b/Scenes/Tags/input.tscn
@@ -1,11 +1,71 @@
-[gd_scene load_steps=5 format=3 uid="uid://c7yay102a3b4c"]
+[gd_scene load_steps=16 format=3 uid="uid://c7yay102a3b4c"]
[ext_resource type="Script" uid="uid://kv6ebscarj2e" path="res://Scripts/Tags/input.gd" id="1_input"]
[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
[ext_resource type="PackedScene" uid="uid://b6c1twaog7hui" path="res://addons/DatePicker/DateButton.tscn" id="3_a88g6"]
+[ext_resource type="Texture2D" uid="uid://bxskuj6mjctt0" path="res://Assets/Icons/chevron-down_dark.svg" id="4_unki5"]
+[ext_resource type="Texture2D" uid="uid://couf8n1thmgqk" path="res://Assets/Icons/chevron-down_grayscale.svg" id="5_unki5"]
+[ext_resource type="Texture2D" uid="uid://cmdipq88xmc4a" path="res://Assets/Icons/chevron-up_dark.svg" id="6_3wmat"]
+[ext_resource type="Texture2D" uid="uid://bbtfmtb4xxrpi" path="res://Assets/Icons/chevron-up_grayscale.svg" id="7_3wmat"]
[sub_resource type="ButtonGroup" id="ButtonGroup_06us3"]
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_xxc4c"]
+content_margin_left = 5.0
+bg_color = Color(0.6, 0.6, 0.6, 0)
+border_width_left = 3
+border_width_top = 3
+border_width_right = 3
+border_width_bottom = 3
+border_color = Color(0, 0, 0, 1)
+corner_radius_top_left = 3
+corner_radius_top_right = 3
+corner_radius_bottom_right = 3
+corner_radius_bottom_left = 3
+expand_margin_right = 28.0
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_pi5h7"]
+content_margin_left = 5.0
+bg_color = Color(0.6, 0.6, 0.6, 0)
+border_width_left = 1
+border_width_top = 1
+border_width_right = 1
+border_width_bottom = 1
+border_color = Color(0, 0, 0, 1)
+corner_radius_top_left = 3
+corner_radius_top_right = 3
+corner_radius_bottom_right = 3
+corner_radius_bottom_left = 3
+expand_margin_right = 28.0
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_pi5h7"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_xxc4c"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_unki5"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_3wmat"]
+
+[sub_resource type="Theme" id="Theme_poopw"]
+LineEdit/colors/caret_color = Color(0, 0, 0, 1)
+LineEdit/colors/font_color = Color(0, 0, 0, 1)
+LineEdit/colors/font_placeholder_color = Color(0, 0, 0, 0.6)
+LineEdit/styles/focus = SubResource("StyleBoxFlat_xxc4c")
+LineEdit/styles/normal = SubResource("StyleBoxFlat_pi5h7")
+LineEdit/styles/read_only = null
+SpinBox/colors/font_color = Color(0, 0, 0, 1)
+SpinBox/colors/font_placeholder_color = Color(0, 0, 0, 0.6)
+SpinBox/icons/down = ExtResource("4_unki5")
+SpinBox/icons/down_hover = ExtResource("5_unki5")
+SpinBox/icons/down_pressed = ExtResource("5_unki5")
+SpinBox/icons/up = ExtResource("6_3wmat")
+SpinBox/icons/up_hover = ExtResource("7_3wmat")
+SpinBox/icons/up_pressed = ExtResource("7_3wmat")
+SpinBox/styles/down_background_hovered = SubResource("StyleBoxEmpty_pi5h7")
+SpinBox/styles/down_background_pressed = SubResource("StyleBoxEmpty_xxc4c")
+SpinBox/styles/up_background_hovered = SubResource("StyleBoxEmpty_unki5")
+SpinBox/styles/up_background_pressed = SubResource("StyleBoxEmpty_3wmat")
+
[node name="Input" type="Control"]
layout_mode = 3
anchors_preset = 15
@@ -57,6 +117,51 @@ offset_bottom = 35.0
toggle_mode = false
[node name="DateButton" parent="." instance=ExtResource("3_a88g6")]
+visible = false
layout_mode = 0
+[node name="HSlider" type="HSlider" parent="."]
+layout_mode = 0
+offset_right = 200.0
+offset_bottom = 35.0
+theme = ExtResource("2_theme")
+value = 50.0
+
+[node name="SpinBox" type="SpinBox" parent="."]
+visible = false
+layout_mode = 0
+offset_right = 94.5625
+offset_bottom = 35.0
+theme = SubResource("Theme_poopw")
+min_value = -99999.0
+max_value = 99999.0
+
+[node name="FileContainer" type="HBoxContainer" parent="."]
+visible = false
+layout_mode = 0
+offset_right = 300.0
+offset_bottom = 35.0
+
+[node name="FileButton" type="Button" parent="FileContainer"]
+custom_minimum_size = Vector2(100, 0)
+layout_mode = 2
+theme = ExtResource("2_theme")
+text = "Choose File"
+
+[node name="FileLabel" type="Label" parent="FileContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+theme = ExtResource("2_theme")
+theme_override_colors/font_color = Color(0, 0, 0, 1)
+text = "No file chosen"
+vertical_alignment = 1
+
+[node name="FileDialog" type="FileDialog" parent="FileContainer"]
+title = "Open a File"
+size = Vector2i(800, 600)
+ok_button_text = "Open"
+file_mode = 0
+access = 2
+use_native_dialog = true
+
[connection signal="popup_closed" from="ColorPickerButton" to="." method="_on_color_picker_popup_closed"]
diff --git a/Scripts/Tags/input.gd b/Scripts/Tags/input.gd
index d168862..c854daa 100644
--- a/Scripts/Tags/input.gd
+++ b/Scripts/Tags/input.gd
@@ -4,6 +4,8 @@ static var button_groups: Dictionary = {}
const BROWSER_TEXT: Theme = preload("res://Scenes/Styles/BrowserText.tres")
var custom_hex_input: LineEdit
+var _file_text_content: String = ""
+var _file_binary_content: PackedByteArray = PackedByteArray()
func init(element: HTMLParser.HTMLElement) -> void:
var color_picker_button: ColorPickerButton = $ColorPickerButton
@@ -50,6 +52,10 @@ func init(element: HTMLParser.HTMLElement) -> void:
var minlength = element.get_attribute("minlength")
var maxlength = element.get_attribute("maxlength")
var pattern = element.get_attribute("pattern")
+ var min_attr = element.get_attribute("min")
+ var max_attr = element.get_attribute("max")
+ var step_attr = element.get_attribute("step")
+ var accept = element.get_attribute("accept")
# Define which child should be active for each input type
var active_child_map = {
@@ -57,7 +63,10 @@ func init(element: HTMLParser.HTMLElement) -> void:
"radio": "RadioButton",
"color": "ColorPickerButton",
"password": "LineEdit",
- "date": "DateButton"
+ "date": "DateButton",
+ "range": "HSlider",
+ "number": "SpinBox",
+ "file": "FileContainer"
}
var active_child_name = active_child_map.get(input_type, "LineEdit")
@@ -101,6 +110,18 @@ func init(element: HTMLParser.HTMLElement) -> void:
date_button.init_with_date(value)
else:
date_button.init()
+
+ "range":
+ var slider = active_child as HSlider
+ setup_range_input(slider, value, min_attr, max_attr, step_attr)
+
+ "number":
+ var spin_box = active_child as SpinBox
+ setup_number_input(spin_box, value, min_attr, max_attr, step_attr, placeholder)
+
+ "file":
+ var file_container = active_child as Control
+ setup_file_input(file_container, accept)
_: # Default case (text input)
var line_edit = active_child as LineEdit
@@ -168,3 +189,103 @@ func _on_custom_hex_submitted(new_text: String) -> void:
var picker = ($ColorPickerButton as ColorPickerButton).get_picker()
picker.set_pick_color(new_color)
$ColorPickerButton.color = new_color
+
+func setup_range_input(slider: HSlider, value: String, min_attr: String, max_attr: String, step_attr: String) -> void:
+ var min_val = min_attr.to_float() if min_attr.length() > 0 else 0.0
+ var max_val = max_attr.to_float() if max_attr.length() > 0 else 100.0
+ var step_val = step_attr.to_float() if step_attr.length() > 0 else 1.0
+
+ slider.min_value = min_val
+ slider.max_value = max_val
+ slider.step = step_val
+ slider.value = value.to_float() if value.length() > 0 else min_val
+
+func setup_number_input(spin_box: SpinBox, value: String, min_attr: String, max_attr: String, step_attr: String, placeholder: String) -> void:
+ var min_val = min_attr.to_float() if min_attr.length() > 0 else -99999.0
+ var max_val = max_attr.to_float() if max_attr.length() > 0 else 99999.0
+ var step_val = step_attr.to_float() if step_attr.length() > 0 else 1.0
+
+ spin_box.min_value = min_val
+ spin_box.max_value = max_val
+ spin_box.step = step_val
+ spin_box.value = value.to_float() if value.length() > 0 else min_val
+
+ var line_edit = spin_box.get_line_edit()
+ line_edit.placeholder_text = placeholder
+
+func setup_file_input(file_container: Control, accept: String = "") -> void:
+ var file_button = file_container.get_node("FileButton") as Button
+ var file_label = file_container.get_node("FileLabel") as Label
+ var file_dialog = file_container.get_node("FileDialog") as FileDialog
+
+ if accept.length() > 0:
+ setup_file_filters(file_dialog, accept)
+
+ file_button.pressed.connect(_on_file_button_pressed)
+ file_dialog.file_selected.connect(_on_file_selected)
+
+ file_label.text = "No file chosen"
+
+func setup_file_filters(file_dialog: FileDialog, accept: String) -> void:
+ file_dialog.clear_filters()
+
+ var filters = accept.split(",")
+ var image_extensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"]
+ var audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac"]
+ var video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "webm"]
+
+ for filter in filters:
+ filter = filter.strip_edges()
+
+ if filter == "image/*":
+ for ext in image_extensions:
+ file_dialog.add_filter("*." + ext, "Image Files")
+ elif filter == "audio/*":
+ for ext in audio_extensions:
+ file_dialog.add_filter("*." + ext, "Audio Files")
+ elif filter == "video/*":
+ for ext in video_extensions:
+ file_dialog.add_filter("*." + ext, "Video Files")
+ elif filter.begins_with("."):
+ # Individual file extension
+ var ext = filter.substr(1)
+ file_dialog.add_filter("*" + filter, ext.to_upper() + " Files")
+ elif filter.contains("/"):
+ # MIME type - convert to common extensions
+ match filter:
+ "text/plain":
+ file_dialog.add_filter("*.txt", "Text Files")
+ "application/pdf":
+ file_dialog.add_filter("*.pdf", "PDF Files")
+ "application/json":
+ file_dialog.add_filter("*.json", "JSON Files")
+ "text/html":
+ file_dialog.add_filter("*.html", "HTML Files")
+ "text/css":
+ file_dialog.add_filter("*.css", "CSS Files")
+ "application/javascript":
+ file_dialog.add_filter("*.js", "JavaScript Files")
+
+ # If no valid filters were added, allow all files
+ if file_dialog.filters.size() == 0:
+ file_dialog.add_filter("*", "All Files")
+
+func _on_file_button_pressed() -> void:
+ var file_dialog = get_node("FileContainer/FileDialog") as FileDialog
+ file_dialog.popup_centered(Vector2i(800, 600))
+
+func _on_file_selected(path: String) -> void:
+ var file_label = get_node("FileContainer/FileLabel") as Label
+ var file_name = path.get_file()
+ file_label.text = file_name
+
+ var file = FileAccess.open(path, FileAccess.READ)
+ if file:
+ _file_text_content = file.get_as_text()
+ file.close()
+
+ file = FileAccess.open(path, FileAccess.READ)
+ _file_binary_content = file.get_buffer(file.get_length())
+ file.close()
+
+ # TODO: when adding Lua, make these actually usable
diff --git a/Scripts/main.gd b/Scripts/main.gd
index 2fbcfa6..6638d76 100644
--- a/Scripts/main.gd
+++ b/Scripts/main.gd
@@ -95,6 +95,15 @@ line breaks
Date
+ Range Slider
+
+
+ Number Input
+
+
+ File Upload
+
+