tweakpane-plugin-inputs
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Inputs for Tweakpane

Helpful inputs for Tweakpane GUI. Made by @tallneil, with thanks to @cocopon, the creator of Tweakpane.

Tweakpane UI screenshot

Stepper input • Demo →

Tweakpane UI screenshot The stepper input in this package is an alternative to the Tweakpane default number input and number range input.

Features

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

Precision

The Tweakpane range (slider) input has a great interface, but it isn't ideal for precision. Referencing the MDN web docs, a range input "should only be used if the control's exact value isn't important." The stepper input in this package provides an interface that is better suited for setting precise values.

Bounds

The range input requires both min and max values, but the stepper input requires neither. This makes the stepper useful for properties that have no bounds, only one bound, or both loewr and upper bounds.

Consider the many CSS properties such as border-radius and stroke-width 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 arbitrary value, or instead I could use a stepper input with no max.

Toggle input

Tweakpane UI screenshot Coming soon!

Installation

<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 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 and register the plugin
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
}

Package Sidebar

Install

npm i tweakpane-plugin-inputs

Weekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

386 kB

Total Files

56

Last publish

Collaborators

  • tallneil