Control Components

Stepper

A control for simple incremental value changes.

Similar in functionality to a <Slider>, but with nice big buttons to increment and decrement the value.

Integrates the Stepper control from Neil Shankar's "Inputs for Tweakpane " plugin.

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

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations.

Example

🔗

Demo

🔗

Code

🔗

<script lang="ts">
  import { Stepper } from 'svelte-tweakpane-ui';
  let angle = 45;
</script>

<Stepper bind:value={angle} label="Angle" step={45} />

<div class="demo" style:--a="{angle}deg"></div>

<style>
  div.demo {
    aspect-ratio: 1;
    width: 100%;
    background: linear-gradient(var(--a), magenta, orange);
  }
</style>

Props

🔗

value 🔗 bindablerequired
Description	A `number` value to control. The value to control.
Type	`number`

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`

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

min 🔗 optional
Description	Minimum value. Specifying both a `min` and a `max` prop turns the control into a slider.
Type	`number`
Default	`undefined`

max 🔗 optional
Description	Maximum value. Specifying both a `min` and a `max` prop turns the control into a slider.
Type	`number`
Default	`undefined`

step 🔗 optional
Description	The minimum step interval.
Type	`number`
Default	`undefined` No step constraint.

pointerScale 🔗 optional
Description	The unit scale for pointer-based input for all dimensions.
Type	`number`
Default	`undefined` Dynamic based on magnitude of `value`.

keyScale 🔗 optional
Description	The unit scale for key-based input for all dimensions (e.g. the up and down arrow keys).
Type	`number`
Default	`1` Or `stepValue` if defined.

format 🔗 optional
Description	A function to customize the point value's string representation (e.g. rounding, etc.).
Type	`((value: number) => string)`
Default	`undefined` Normal `.toString()` formatting.

wide 🔗 optional
Description	When `true`, expand the width of the control at the expense of the numeric input field.
Type	`boolean`
Default	`false`

Events

🔗

change 🔗
Description	Fires when `value` changes. This event is provided for advanced use cases. It's usually preferred to bind to the `value` 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 `value` (`external`).
Extends	`ValueChangeEvent`
Type	`StepperChangeEvent`

Stepper

Example

Demo

Code

Props

value

disabled

label

theme

min

max

step

pointerScale

keyScale

format

wide

Events

change