Slider

API reference for the "Slider" control.

Renders a slider within the Canva UI.
To learn how controls work, refer to Rich controls.
For guidelines on making the most of rich controls, see Use rich controls (with some restraint).
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);
}

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.

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.

Select

TextInput

Last modified 5mo ago