                           (< bmi 30) ["orange" "overweight"]
                           :else ["red" "obese"])]
     [:div
+     [:h3 "BMI calculator"]
      [:div
       "Height: " (int height) "cm"
-      [slider {:value height :min 100 :max 220 :key :height}]]
+      [slider {:value height :min 100 :max 220 :param :height}]]
      [:div
       "Weight: " (int weight) "kg"
-      [slider {:value weight :min 50 :max 200 :key :weight}]]
+      [slider {:value weight :min 30 :max 150 :param :weight}]]
      [:div
       "BMI: " (int bmi) " "
       [:span {:style {:color color}} diagnose]
-      [slider {:value bmi :min 10 :max 50 :key :bmi :clear :weight}]]]))
+      [slider {:value bmi :min 10 :max 50 :param :bmi
+               :clear :weight}]]]))
 
 (defn intro []
   [:div

      [:div
       [:p "The value of " [:code "val"] " is now: " @val]
       [:p "Change it: "
        [:input {:type "text"
                 :value @val
                 :on-change #(reset! val (-> % .-target .-value))}]]])))

(defn calc-bmi [{:keys [height weight bmi] :as params}]
  (let [h (/ height 100)]

   [:p "The easiest way to manage state in Cloact is to use Cloact's
   own version of " [:code "atom"] ". It works exactly like the one in
   clojure.core, except that it keeps track of every time it is
   deref'ed. Any component that uses an " [:code "atom"]" is automagically
   re-rendered when its value changes."]

   [:p "Let's demonstrate that with a simple example:"]
   [demo-component {:comp counting-component
                    :defs [:ns :click-count :counting-component]}]

   [:p "Sometimes you may want to maintain state locally in a
   component. That is easy to do with an " [:code "atom"] " as well."]

   [:p "Here is an example of that:"]
   [demo-component {:comp local-state
