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

StepperExample.svelte

<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