Binding

Wraps the Tweakpane addBinding method.

Important: This component is provided for consistency with Tweakpane's API, but is not recommended for general use in Svelte Tweakpane UI because more helpful abstractions are available.

Please consider convenience components like <Slider>, <Color>, etc. etc. before using this component directly.

Usage outside of a <Pane> component will implicitly wrap the component in <Pane position="inline">.

---

Example

Demo

Value: 0

Code

BindingExample.svelte

<script lang="ts">
  import { Binding, type BindingObject } from 'svelte-tweakpane-ui'

  let object: BindingObject = { r: 0 }
</script>

<Binding bind:object key="r" label="Reticulation" />
<pre>Value: {object.r}</pre>

---

Props

object bindablerequired
Description	The binding's target object with values to manipulate.
Type	Bindable

key required
Description	The key for the value in the target object that the control should manipulate.
Type	string

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

options optional
Description	Tweakpane's internal options object. See BindingParams. Valid types are contingent on the type of the value key points to in object. This is intended internal use, when implementing convenience components wrapping Binding's functionality. Options of interest are instead exposed as top-level props in Svelte Tweakpane UI.
Type	BindingParams
Default	undefined

theme optional
Description	Custom color scheme. If undefined, inherits default Tweakpane theme equivalent to ThemeUtils.presets.standard, or the theme set with setGlobalDefaultTheme().
Type	Theme
Default	undefined

ref bindablereadonlyoptional
Description	Reference to internal Tweakpane BindingApi for this control. This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Binding>'s functionality. Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.
Type	BindingRef

plugin optional
Description	Imported Tweakpane TpPluginBundle (aliased as Plugin) module to automatically register in the <Binding>'s containing <Pane>. This property is exposed for advanced use cases only, such as when implementing convenience components wrapping <Binding>'s functionality in combination with a Tweakpane plugin. Direct manipulation of Tweakpane's internals can break Svelte Tweakpane UI abstractions.
Type	TpPluginBundle
Default	undefined

---

Events

change
Description	Fires when the value of object[key] changes. This event is provided for advanced use cases. It's usually preferred to bind to the object prop instead. The event.details payload includes a copy of the value and an origin field to distinguish between user-interactive changes (internal) and changes resulting from programmatic manipulation of the object (external).
Extends	ValueChangeEvent
Type	BindingChangeEvent