Inputs for Tweakpane

Additional inputs for Tweakpane GUI, including a numerical stepper input.

Author

Made by @tallneil. Thanks to @cocopon, the creator of Tweakpane.

Stepper input

This stepper input is an alternative to the Tweakpane default range slider input. A stepper may be better suited for small sets of discrete values, whereas a range slider is ideal for larger, continuous ranges.

Demo

Features

• Use the - and + buttons to decrement or increment value by step
• Optional min, max, and step params (step defaults to 1)
• Support for existing Tweakpane number input features, including point and slide.

Installation

Browser

<script type="module">
  import {Pane} as Tweakpane from './tweakpane.min.js';
  import * as TweakpanePluginInputs from './tweakpane-plugin-inputs.min.js';

  const pane = new Pane();
  pane.registerPlugin(TweakpanePluginInputs);
</script>

Package

import {Pane} from 'tweakpane';
import * as TweakpanePluginInputs from 'tweakpane-plugin-inputs';

const pane = new Pane();
pane.registerPlugin(TweakpanePluginInputs);

Usage

const params = {
  prop: 2.5,
};

pane.addBinding(params, 'prop', {
    view: 'stepper',
    min: 0.5,
    max: 3,
    step: 0.5,
}).on('change', newValue => {updateValue(newValue.value)});

function updateValue(v) {
  // do something with the new value
}

Development notes

npm install
npm run setup
npm run start