25:["$","title",null,{"children":"Synchronized Inputs | Soma Maroju | Observable"}] 49:[] 29:{"id":"b684436110275869","slug":null,"title":"Synchronized Inputs","thumbnail":"51044034d732d89de50ee7db1aa964d89668fdd450a342e3d412034fae66518b","access_level":"public","create_time":"$D2023-10-19T12:00:19.076Z","update_time":"$D2023-10-19T12:00:19.076Z","view_time":null,"first_public_time":"$D2023-10-19T12:00:19.076Z","has_unpublished_edits":null,"fork":{"id":"3c37c9bffc213235","slug":"synchronized-inputs","title":"Synchronized Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eac78d14fa642354","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":211,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9faaf2168ef63076","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9faaf2168ef63076","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Synchronized Inputs","cells":[{"id":0,"value":"

Observable Inputs › BIND · API

\n\n# Synchronized Inputs\n\n[Observable Inputs](/@observablehq/inputs) behave similarly to native HTML inputs: they expose a value and emit an *input* event when the user changes the value. This makes them compatible with [Observable’s viewof operator](/@observablehq/introduction-to-views). It also means that you can programmatically control the value of an input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Setting the value of an input with viewof requires two steps:\n\n1. Assign the input’s value (viewof x.value)\n2. Dispatch an *input* event (viewof x.dispatchEvent)\n\nAs a function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"Now let’s try it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"viewof x = Inputs.range([0, 100], {step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"Inputs.button([\n [\"Set to 0\", () => set(viewof x, 0)],\n [\"Set to 100\", () => set(viewof x, 100)]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Here `viewof x` refers to the view (the HTMLFormElement returned by [Inputs.range](/@observablehq/input-range)), whereas `x` refers to the view’s live value. A cell referencing `x` will run whenever the value of `x` changes, but a cell that only references `viewof x` only runs if the view itself is redefined (which typically only occurs on load and when the code is edited).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"viewof x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Programmatic control allows multiple inputs value to control a single value — to be synchronized. For example, in a tall notebook, you might offer redundant inputs under each chart so that the reader doesn’t have to scroll to change an input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"Inputs.**bind** allows you to bind two inputs together so that interacting with one input updates the second and vice versa. It takes two inputs as arguments and returns the first input. This makes it convenient to bind a secondary input to an existing input while displaying it in a cell or elsewhere (even inline!).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"Inputs.bind(Inputs.range([0, 100]), viewof x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"This is a range input ${Inputs.bind(htl.html``, viewof x)}.\n\nThis is a number input ${Inputs.bind(htl.html``, viewof x)}.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"Sometimes there isn’t an obvious “primary” input to bind to. In this case, you can use Inputs.**input** to create a lightweight mutable value store. The Input function takes an optional initial value and can be passed to bind as the second argument. Try dragging either slider below!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof i = Inputs.input(42)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Inputs.bind(Inputs.range([0, 100]), viewof i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Inputs.bind(Inputs.range([0, 100]), viewof i)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null