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