Control Components

Ring

A control evoking the focus ring on a proper camera lens.

Similar in functionality to a <Slider>.

Integrates the Ring control from Tweakpane-creator Hiroki Kokubun's Camerakit plugin.

Usage outside of a <Pane> component will implicitly wrap the ring 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

🔗

<script lang="ts">
  import { Ring, type RingUnit } from 'svelte-tweakpane-ui';

  let unitConfig: RingUnit = {
    value: 20,
    pixels: 40,
    ticks: 5
  };

  let angle = 45;
</script>

<Ring
  bind:value={angle}
  format={(v) => `${(Math.abs(v) % 360).toFixed(0)}°`}
  pointerScale={-2.5}
  unit={unitConfig}
  wide={true}
/>

<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`

series 🔗 optional
Description	Style variations.
Type	`RingSeries`
Default	`0`

unit 🔗 optional
Description	Density and value mapping of the ring's tick marks.
Type	`RingUnit`
Default	`{ ticks: 5, pixels: 40, value: 10 }`

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	`RingChangeEvent`

Ring

Example

Demo

Code

Props

value

series

unit

disabled

label

theme

min

max

step

pointerScale

keyScale

format

wide

Events

change