diff --git a/web/src/components/number_field.rs b/web/src/components/number_field.rs
index a104551..889d4ec 100644
--- a/web/src/components/number_field.rs
+++ b/web/src/components/number_field.rs
@@ -24,8 +24,8 @@ where
 {
     name: String,
     on_change: Option<F>,
-    min: i32,
-    counter: &'ctx Signal<String>,
+    min: f64,
+    counter: &'ctx Signal<f64>,
 }
 
 #[component]
@@ -47,23 +47,23 @@ where
 
     view! {cx,
         div() {
-            input(type="number", id=id, name=name, class="item-count-sel", min=min_field, max="99", step="1", bind:value=counter, on:input=move |evt| {
+            input(type="number", id=id, name=name, class="item-count-sel", min=min_field, max="99", step="1", bind:valueAsNumber=counter, on:input=move |evt| {
                 on_change.as_ref().map(|f| f(evt));
             })
             span(class="item-count-inc-dec", on:click=move |_| {
-                let i: i32 = counter.get_untracked().parse().unwrap();
+                let i = *counter.get_untracked();
                 let target = js_lib::get_element_by_id::<HtmlInputElement>(&inc_target_id).unwrap().expect(&format!("No such element with id {}", inc_target_id));
-                counter.set(format!("{}", i+1));
+                counter.set(i+1.0);
                 debug!(counter=%(counter.get_untracked()), "set counter to new value");
                 // We force an input event to get triggered for our target.
                 target.dispatch_event(&web_sys::Event::new("input").expect("Failed to create new event")).expect("Failed to dispatch event to target");
             }) { "▲" }
             " "
             span(class="item-count-inc-dec", on:click=move |_| {
-                let i: i32 = counter.get_untracked().parse().unwrap();
+                let i = *counter.get_untracked();
                 let target = js_lib::get_element_by_id::<HtmlInputElement>(&dec_target_id).unwrap().expect(&format!("No such element with id {}", dec_target_id));
                 if i > min {
-                    counter.set(format!("{}", i-1));
+                    counter.set(i-1.0);
                     debug!(counter=%(counter.get_untracked()), "set counter to new value");
                     // We force an input event to get triggered for our target.
                     target.dispatch_event(&web_sys::Event::new("input").expect("Failed to create new event")).expect("Failed to dispatch event to target");
diff --git a/web/src/components/recipe_selection.rs b/web/src/components/recipe_selection.rs
index 8c0f5d3..ec741f5 100644
--- a/web/src/components/recipe_selection.rs
+++ b/web/src/components/recipe_selection.rs
@@ -52,10 +52,10 @@ pub fn RecipeSelection<'ctx, G: Html>(
             .get(id_for_count.as_ref())
             .unwrap_or(&0)
     });
-    let count = create_signal(cx, format!("{}", *current_count.get_untracked()));
+    let count = create_signal(cx, *current_count.get_untracked() as f64);
     create_effect(cx, || {
-        let updated_count = format!("{}", current_count.get());
-        if &updated_count != count.get_untracked().as_ref() {
+        let updated_count = *current_count.get() as f64;
+        if updated_count != *count.get_untracked() {
             count.set(updated_count);
         }
     });
@@ -67,9 +67,9 @@ pub fn RecipeSelection<'ctx, G: Html>(
     view! {cx,
         div() {
             label(for=for_id) { a(href=href) { (*title) } }
-            NumberField(name=name, counter=count, min=0, on_change=Some(move |_| {
+            NumberField(name=name, counter=count, min=0.0, on_change=Some(move |_| {
                 debug!(idx=%id, count=%(*count.get_untracked()), "setting recipe count");
-                sh.dispatch(cx, Message::UpdateRecipeCount(id.as_ref().clone(), count.get_untracked().parse().expect("Count is not a valid usize")));
+                sh.dispatch(cx, Message::UpdateRecipeCount(id.as_ref().clone(), *count.get_untracked() as usize));
             }))
         }
     }