Control Components

IntervalSlider

A twin-handled slider control for specifying range values.

Integrates the Interval control from Tweakpane-creator Hiroki Kokubun's Essentials plugin.

Svelte Tweakpane UI extends the original implementation to by supporting tuple values in addition to object values. It also exposes a meanValue prop for reading or setting the midpoint of the interval range value.

Usage outside of a <Pane> component will implicitly wrap the interval slider 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-essentials to @kitschpatrol/tweakpane-plugin-essentials for consistency with other plugins.

Example

🔗

Demo

🔗

Code

🔗

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

  // Could specify convenience type IntervalSliderValueTuple here, or
  // use the object {start: number, end: number} instead of a tuple
  let value: [number, number] = [25, 75]
</script>

<IntervalSlider
  bind:value
  min={0}
  max={100}
  format={(v) => `${v.toFixed(0)}%`}
/>
<div class="demo" style:--e="{value[1]}%" style:--s="{value[0]}%"></div>

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

Props

🔗

value 🔗 bindablerequired
Description	Interval value to control. Tuples are a convenience addition to the vanilla JS Tweakpane API. The value to control.
Type	`IntervalSliderValue`

value

🔗

bindablerequired

Description

Interval value to control.

Tuples are a convenience addition to the vanilla JS Tweakpane API. The value to control.

Type IntervalSliderValue

meanValue 🔗 bindableoptional
Description	Midpoint of the interval range value.
Type	`number`
Default

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

IntervalSlider

Example

Demo

Code

Props

value

meanValue

disabled

label

theme

min

max

step

pointerScale

keyScale

format

wide

Events

change