Slider

API reference for the "Slider" control.

Renders a slider within the Canva UI.

To learn how controls work, refer to Rich controls.

Usage

canva.create('slider', {
id: 'sliderExample',
label: 'Slider Example',
value: 50,
min: 0,
max: 100,
step: 1,
});

Parameters

Name

Type

Required

Description

controlType

string

Yes

The type of control. To create a slider, the value must be "slider".

opts

object

Yes

Properties for configuring the control.

opts.id

string

Yes

A unique ID for the control.

opts.label

string

Yes

A human readable label for the control.

opts.value

string

Yes

The value of the slider. This number must be within the range of the min and max properties.

opts.min

string

Yes

The minimum allowed value of the slider. This number can be an integer or a floating point number. It can also be negative or positive.

opts.max

string

Yes

The maximum allowed value of the slider. This number can be an integer or a floating point number. It can also be negative or positive.

opts.step

string

Yes

The number to increment or decrement by as a user adjusts the value of the slider. This number can be an integer or a floating point number.

opts.disabled

boolean

No

If true, the user can't interact with the control.

Event

Name

Type

Required

Description

opts

object

Yes

Information about the event.

opts.message

object

Yes

Information about the event.

opts.message.commit

boolean

Yes

If false, the user is actively interacting with the control. If true, the user has finished interacting with the control.

opts.message.controlId

string

Yes

The id of the control.

opts.message.controlType

string

Yes

The type of control. The value of this property is always "slider".

opts.message.message

object

Yes

Additional information about the event.

opts.message.message.type

string

Yes

The type of event. The value of this property is always "setValue".

opts.message.message.value

number

Yes

The value of the slider.

Example

const canva = window.canva.init();
const state = {
sliderExample: 50,
};
canva.onReady(() => {
renderControls();
});
canva.onControlsEvent(async (opts) => {
if (!opts.message.commit) {
return;
}
if (opts.message.controlType === 'slider') {
state[opts.message.controlId] = opts.message.message.value;
}
renderControls();
});
function renderControls() {
const controls = [
canva.create('slider', {
id: 'sliderExample',
label: 'Slider Example',
value: state.sliderExample,
min: 0,
max: 100,
step: 1,
}),
];
canva.updateControlPanel(controls);
}