Changing a label of a property

Property name will be used as a label by default. Use label option to change it.

var pane = new Tweakpane();
pane.addSlider(target, 'initSpeed', {
  label: 'Initial speed',
  min: 0.0,
  max: 1.0

Placing a pane in a specified element

You can specify a container element by container option.

var pane = new Tweakpane({
  container: document.getElementById('someElementId')

Disabling fold

Set foldable option to false.

var pane = new Tweakpane({
  foldable: false

Refreshing property views manually

Tweakpane doesn't watch a property change automatically, so you need to refresh it manually if a property is changed without Tweakpane. Call refresh() to refresh all property views.

var pane = new Tweakpane();

// (changed a property without Tweakpane...)


Changing width of a pane

Add a CSS style for the default container, or specify another container.

// Add a CSS style for the default container
var pane1 = new Tweakpane();
var styleElem = document.createElement('style');
styleElem.textContent = '.tpDefaultContainer {width: 320px;}';

// Or, specify another container
var pane2 = new Tweakpane({
  container: document.getElementById('yourContainer')