Skip to content
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

🔗
IntervalSliderExample.svelte
<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.

TypeIntervalSliderValue

meanValue

🔗
bindableoptional
Description

Midpoint of the interval range value.

Typenumber
Default

disabled

🔗
optional
Description

Prevent interactivity and gray out the control.

Typeboolean
Defaultfalse

label

🔗
optional
Description

Text displayed next to control.

Typestring
Defaultundefined

theme

🔗
optional
Description

Custom color scheme.

TypeTheme
Defaultundefined
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.

Typenumber
Defaultundefined

max

🔗
optional
Description

Maximum value.

Specifying both a min and a max prop turns the control into a slider.

Typenumber
Defaultundefined

step

🔗
optional
Description

The minimum step interval.

Typenumber
Defaultundefined
No step constraint.

pointerScale

🔗
optional
Description

The unit scale for pointer-based input for all dimensions.

Typenumber
Defaultundefined
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).

Typenumber
Default1
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)
Defaultundefined
Normal .toString() formatting.

wide

🔗
optional
Description

When true, expand the width of the control at the expense of the numeric input field.

Typeboolean
Defaultfalse

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).

ExtendsValueChangeEvent
TypeIntervalSliderChangeEvent