input-range-component-state-transition-example

example-input-range.cljs

(ns rmfu-ui.profile
  (:require 
          [reagent.core :as reagent :refer [atom]]))      ;; <--- special version of the atom here, rerenders componets on change

(defn input-range-component
  [state param]
  [:div.row
   [:p.bullet.col-lg-7
    "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."]
   [:p.col-lg-5
    "Agree "
    [:input
     {:type "range"
      :min 0
      :max 3
      :step 1
      :list "agreevalues"
      :value (:agreeness @state);; <---- notice the binding of the value to the input
      :on-change (fn [e]
                   (println (-> e .-target .-value));; <----- checkout out the console,
                   ;; we should see this value printed
                   (swap! state assoc param (-> e .-target .-value)) ;; <--- state transition happening here!
                   )}]
    " Disagree"]])

(defn profile []
  (let [app-state (atom {:agreeness 0})]                    ;; <----- define some app-state to play with
    [:div
     [:div.container.jumbotron
      {:style {:max-width "700px"}}
      [:div.row
       [:div.col-lg-12
        [:h3.text-center
         "Tell Us About Yourself"]
        [input-range-component app-state :agreeness]        ;; <--- we use the component here
        [:div.col-lg-6
         [:input.form-control.pull-left
          {:type "text", :placeholder "First Name", :value ""}]]
        [:div.col-lg-6
         [:input.form-control.pull-right
          {:type "text", :placeholder "Last Name", :value ""}]]
        ]]]]))