tweakpane-plugin-inputs

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 number input and number range input.

Demo

Try it →

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.

Optional bounds

The range (slider) input requires both min and max values, but the stepper input requires neither. This makes the stepper useful for properties that have a mandatory lower bound, but no mandatory upper bound, or vice versa.

For instance, consider the many CSS properties such as border-radius that require non-negative values. This tells us to set min to 0, but what about max? If I want to use a range input, I'd have to give max some arbitrarily large value, but a stepper input with no max would well here.

Because the upper bound is optional, a stepper input is also well-suited for properties like count or quantity.

Installation

CDN

<script type="module">
  import {Pane} from 'https://cdn.jsdelivr.net/npm/tweakpane/dist/tweakpane.min.js';
  import * as TweakpanePluginInputs from 'https://cdn.jsdelivr.net/npm/tweakpane-plugin-inputs/dist/tweakpane-plugin-inputs.min.js';
</script>

NPM

npm i tweakpane
npm i tweakpane-plugin-inputs

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

Example (JS)

// import Tweakpane and this plugin using CDN links
import {Pane} from 'https://cdn.jsdelivr.net/npm/tweakpane/dist/tweakpane.min.js';
import * as TweakpanePluginInputs from 'https://cdn.jsdelivr.net/npm/tweakpane-plugin-inputs/dist/tweakpane-plugin-inputs.min.js';

// make a new pane
const pane = new Pane();
pane.registerPlugin(TweakpanePluginInputs);

// set params you want to tweak
const params = {
  prop: 2.5,
};

// make a stepper input and bind it to a param
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
}