Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
input-range-component-state-transition-example
(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 ""}]]
]]]]))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.