Control Components

Slider

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

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

🔗

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

Slider

Example

Demo

Code

Props

value

disabled

label

theme

min

max

step

pointerScale

keyScale

format

wide

Events

change