diff --git a/dyesub-tool/src/main.rs b/dyesub-tool/src/main.rs
index 84e1558..72c9d2f 100644
--- a/dyesub-tool/src/main.rs
+++ b/dyesub-tool/src/main.rs
@@ -1,24 +1,43 @@
 mod render;
 pub mod svg;
 
-use sycamore::prelude::*;
+use svg::{SVGUnit, SVGMeasure};
+use sycamore::{prelude::*, view::ToView, builder::t};
 
-#[component]
-fn Slider<G: Html>(cx: Scope) -> View<G> {
-    let value = create_signal(cx, 0.0);
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+struct Color {
+    red: u8,
+    green: u8,
+    blue: u8,
+}
+
+impl<G: Html> ToView<G> for SVGUnit {
+    fn to_view(&self) -> View<G> {
+        t(self.to_string())
+    }
+}
+
+#[component(inline_props)]
+fn Slider<'a, G: Html>(cx: Scope<'a>, value: &'a Signal<f64>, unit: Option<SVGUnit>) -> View<G> {
     view! { cx,
-        (value.get())
-        input(type="range", bind:valueAsNumber=value)
+        div(class="f-row align-items:center") {
+            span { (value.get())(unit) }
+            input(type="range", bind:valueAsNumber=value)
+        }
     }
 }
 
 fn main() {
     sycamore::render_to(
         |cx| {
+            let x = create_signal(cx, 0.0);
+            let y = create_signal(cx, 0.0);
+            let z = create_signal(cx, 0.0);
             view! { cx,
-                Slider
-                Slider
-                Slider
+                "Total: "(*x.get() + *y.get() + *z.get())
+                Slider(value=x, unit=SVGUnit::Inch)
+                Slider(value=y)
+                Slider(value=z)
             }
         },
         {