Reference@makeswift/runtimeControls

Slider

Adds a Slider input in the Makeswift builder to visually edit a number prop.

A Slider panel on a component to set a numeric value

Params

label
stringDefaults to Slider

Text for the panel label in the Makeswift builder.

description
string

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format. Added in v0.24.8.

defaultValue
number

The value passed to your component when nothing is set in the Makeswift builder.

min
number0

The smallest number that can be set in the panel slider.

max
number0

The largest number that can be set in the panel slider.

step
numberDefaults to 1

The increment amount when dragging the slider or using the input.

showInput
boolean

When true, displays a numeric input field alongside the slider.

Prop type

The Slider control passes a number to your component. If you don’t set a defaultValue and no value is set in the builder, your component receives undefined.

Example

1import { Slider } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Banner } from "./Banner";
6
7runtime.registerComponent(Banner, {
8  type: "banner",
9  label: "Banner",
10  props: {
11    opacity: Slider({
12      label: "Opacity",
13      defaultValue: 100,
14      min: 0,
15      max: 100,
16      step: 1,
17    }),
18  },
19});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.