Wheel

A control evoking a dial on a proper camera body.

Similar in functionality to a <Slider>.

Integrates the Wheel control from Tweakpane-creator Hiroki Kokubun's CameraKit plugin.

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

Note that Svelte Tweakpane UI embeds a functionally identical fork of the plugin with build optimizations. The fork also changes the package name from @tweakpane/plugin-camerakit to @kitschpatrol/tweakpane-plugin-camerakit for consistency with other plugins.

---

Example

Demo

Code

WheelExample.svelte

<script lang="ts">
  import { Wheel } from 'svelte-tweakpane-ui'

  let angle = 45
</script>

<Wheel
  bind:value={angle}
  format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
/>

<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

disabled optional
Description	Prevent interactivity and gray out the control.
Type	boolean
Default	false

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

label optional
Description	Text displayed next to control.
Type	string
Default	undefined

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

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. If undefined, there is no step constraint.
Type	number
Default	undefined

pointerScale optional
Description	The unit scale for pointer-based input. If undefined, default is dynamic based on magnitude of value.
Type	number
Default	`undefined``

keyScale optional
Description	The unit scale for key-based input (e.g. the up and down arrow keys). Will be overridden by stepValue if defined.
Type	number
Default	1

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

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

amount optional
Description	The amount of the value to change per pixel of movement. If undefined, value is dynamic based on magnitude of value.
Type	number
Default	undefined

---

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	WheelChangeEvent