diff --git a/Luxe/assets/wip/SliderHandle.image.lx b/Luxe/assets/wip/SliderHandle.image.lx
new file mode 100644
index 0000000..e1befcb
--- /dev/null
+++ b/Luxe/assets/wip/SliderHandle.image.lx
@@ -0,0 +1,3 @@
+image = {
+    source = "assets/wip/SliderHandle.png"
+}
\ No newline at end of file
diff --git a/Luxe/assets/wip/SliderHandle.png b/Luxe/assets/wip/SliderHandle.png
new file mode 100644
index 0000000..ae203d0
--- /dev/null
+++ b/Luxe/assets/wip/SliderHandle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ef10eae4ea4175220eeef223c47131a82cb1431d35e295a9a1edd7e7c590a4ce
+size 113
diff --git a/Luxe/blocks/adventures.wren b/Luxe/blocks/adventures.wren
index 6da0b1f..738f08e 100644
--- a/Luxe/blocks/adventures.wren
+++ b/Luxe/blocks/adventures.wren
@@ -4,11 +4,13 @@ import "globals" for Globals
 
 class Adventures{
   planning{_planning}
+  max_distance{_max_distance}
 
   construct new(){
     _planning = Observable.new()
     _in_progress = []
     _archive = []
+    _max_distance = 10
   }
 
   plan_new(){
diff --git a/Luxe/blocks/ui/adventure.wren b/Luxe/blocks/ui/adventure.wren
index 0885f22..7aba971 100644
--- a/Luxe/blocks/ui/adventure.wren
+++ b/Luxe/blocks/ui/adventure.wren
@@ -2,19 +2,16 @@ import "luxe: draw" for Draw, PathStyle
 import "luxe: world" for Entity, Transform, UI, UIRenderMode, UIEvent
 import "luxe: world" for UILayout, UILayoutBehave, UILayoutContain
 import "luxe: ui/control" for Control
-import "luxe: ui/panel" for UIPanel
-import "luxe: ui/list" for UIList
-import "luxe: ui/button" for UIButton
-import "luxe: ui/image" for UIImage
+import "luxe: ui/label" for UILabel
 import "luxe: assets" for Assets
-import "luxe: ui/text" for UIText
-import "luxe: render" for Material
+import "luxe: render" for Material, TextAlign
 
 import "globals" for Globals
 import "blocks/ui/image_button" for ImageButton
 import "math/observable" for Observable
 import "blocks/ui/simple_text" for UISimpleText
 import "blocks/ui/ui" for Ui
+import "blocks/ui/slider" for UiSlider
 import "blocks/ui/compass" for UiCompass
 import "math/math" for M
 
@@ -67,10 +64,10 @@ class UiAdventure{
       _game.adventures.discard()
       _page = UiAdventure.direction
     }
-    _ui.list_button(list, [3, 0], "Direction") {_page = UiAdventure.direction}
-    _ui.list_button(list, [2, 0], "People") {_page = UiAdventure.people}
-    _ui.list_button(list, [4, 0], "Stuff") {_page = UiAdventure.resources}
-    _ui.list_button(list, [5, 0], "Depart") {_page = UiAdventure.depart}
+    _ui.list_button(list, [3, 0], "Direction") {_page.value = UiAdventure.direction}
+    _ui.list_button(list, [2, 0], "People") {_page.value = UiAdventure.people}
+    _ui.list_button(list, [4, 0], "Stuff") {_page.value = UiAdventure.resources}
+    _ui.list_button(list, [5, 0], "Depart") {_page.value = UiAdventure.depart}
   }
 
   direction(){
@@ -78,14 +75,17 @@ class UiAdventure{
     Control.child_add(_root, page)
     UILayout.set_behave(_ent, page, UILayoutBehave.fill)
     UILayout.set_margin(_ent, page, 0, 0, 0, 16)
+    UILayout.set_contain(_ent, page, UILayoutContain.row | UILayoutContain.start) //|
 
     _page.on_change(true){|val|
       Control.set_visible(page, val == UiAdventure.direction)
     }
 
+    //compass
     var compass = UiCompass.create(_ent)
     Control.child_add(page, compass)
     Control.set_size(compass, 32, 32)
+    UILayout.set_margin(_ent, compass, 8, 0, 0, 0)
     var steps = 16 //compass steps
     var step_names = ["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"]
     var full_step_names = step_names.map{|short|
@@ -119,6 +119,60 @@ class UiAdventure{
         adventure.emit()
       }
     }
+
+    //other parent
+    var colParent = Control.create(_ent)
+    Control.set_id(colParent, "dir col parent")
+    Control.child_add(page, colParent)
+    UILayout.set_behave(_ent, colParent, UILayoutBehave.fill)
+    UILayout.set_margin(_ent, colParent, 8, 0, 0, 0)
+    UILayout.set_contain(_ent, colParent, UILayoutContain.column | UILayoutContain.start) //|
+
+    //slider
+    var slider = UiSlider.create(_ent)
+    Control.set_id(slider, "dir dist slider")
+    Control.child_add(colParent, slider)
+    Control.set_size(slider, 0, 11)
+    UILayout.set_behave(_ent, slider, UILayoutBehave.left | UILayoutBehave.right) //|
+    UILayout.set_margin(_ent, slider, 4, 4, 4, 0)
+
+    _game.adventures.planning.on_change(true){|val|
+      if(val == null) return
+      var relative_distance = val.distance / _game.adventures.max_distance
+      UiSlider.set_value(slider, relative_distance)
+    }
+
+    Control.set_events(slider){|event|
+      if(event.type == UIEvent.change){
+        var distance = (event.change * _game.adventures.max_distance).round
+        var adventure = _game.adventures.planning
+        adventure.value.distance = distance
+        adventure.emit()
+      }
+    }
+
+    //text
+    var text = UILabel.create(_ent)
+    Control.set_id(text, "dir text")
+    Control.child_add(colParent, text)
+    UILabel.set_font(text, _ui.font)
+    UILabel.set_text_size(text, 8)
+    UILabel.set_align_vertical(text, TextAlign.top)
+    UILayout.set_behave(_ent, text, UILayoutBehave.left) //|
+    UILayout.set_margin(_ent, text, 4, 8, 4, 0)
+
+    var update_text = Fn.new{
+      var adventure = _game.adventures.planning.value
+      if(adventure == null) return
+      var direction = full_step_names[adventure.direction]
+      System.print("-----")
+      System.print(adventure)
+      System.print(adventure.distance)
+      var dist = adventure.distance
+      System.print(dist)
+      UILabel.set_text(text, "%(dist)km %(direction)")
+    }
+    _game.adventures.planning.on_change(true, update_text)
   }
 
   people(){
diff --git a/Luxe/blocks/ui/slider.wren b/Luxe/blocks/ui/slider.wren
new file mode 100644
index 0000000..44f7762
--- /dev/null
+++ b/Luxe/blocks/ui/slider.wren
@@ -0,0 +1,55 @@
+import "luxe: ui/control" for Control
+import "luxe: world" for UI, World, UIEvent
+import "luxe: draw" for PathStyle
+import "luxe: assets" for Assets
+import "luxe: render" for Image
+import "luxe: math" for Math
+
+import "globals" for Globals
+import "math/rect" for AABB
+import "math/math" for M
+import "blocks/debug" for DrawDebug
+
+class UiSlider{
+
+  static create(ent){
+    var compass = Control.create(ent)
+    var style = PathStyle.new()
+    style.color = [1,1,1,1]
+    style.thickness = 1
+    Control.set_allow_input(compass, true)
+    Control.set_state_data(compass, {"value": 0.5, "style": style, "pressed": false}) //angle is in radians between 0 and tau
+    Control.set_render(compass) {|control, state, x, y, w, h|
+      var depth = UI.draw_depth_of(control, 0) 
+      UI.draw_rect(control, x+0.5, y+0.5, depth, w-1, h-1, 0, state["style"])
+      UI.draw_line(control, x + h/2, y + h/2, x + w - h/2, y + h/2, depth, state["style"])
+      var image = Assets.image("assets/wip/SliderHandle")
+      var img_size = [Image.get_width(image), Image.get_height(image)]
+      UI.draw_image(control, (M.lerp(x+h/2, x+w-h/2, state["value"]) - img_size.x/2).round, 
+          y+h/2-img_size.y/2, depth, img_size.x, img_size.y, 
+          0, [1,1,1,1], [0, 0, 1, 1], image, true)
+    }
+    Control.set_process(compass){|control, state, event, x,y,w,h|
+      if(event.control != control) return
+      if(event.type == UIEvent.press){
+        state["pressed"] = true
+        UI.capture(control)
+      } else if(event.type == UIEvent.release){
+        state["pressed"] = false
+        UI.uncapture(control)
+      } else if(event.type == UIEvent.move && state["pressed"]){
+        var abs_x = Control.get_pos_x_abs(control)
+        var rel_pos = M.inv_lerp(abs_x+h/2, abs_x+w-h/2, event.x)
+        rel_pos = M.clamp(rel_pos, 0, 1)
+        UI.events_emit(control, UIEvent.change, rel_pos)
+      }
+    }
+    return compass
+  }
+
+  static set_value(slider, value){
+    var data = Control.get_state_data(slider)
+    data["value"] = value
+  }
+
+}
\ No newline at end of file