Slider

A slider component providing fine-grained control over numeric values.

Wraps Tweakpane's number bindings.

Note that if min and max props are not defined, no linear slider widget will be provided and a input field with a draggable handle will be used instead.

See the <Interval> component for a multi-handle range-defining slider.

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

---

Example

Demo

Value: 0

Code

SliderExample.svelte

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

  let value = 0
</script>

<Slider
  bind:value
  min={-1}
  max={1}
  format={(v) => v.toFixed(2)}
  label="Let it Slide"
/>
<pre>Value: {value}</pre>

---

Props

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

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	SliderChangeEvent