This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads, or image ads.
The Slider component lets you add a slider to your project. Users can drag the slider to pick a number from a range that you specify. Sliders are useful when you don't need an exact numeric value.
To use the Slider component in your project:
- Open the Components panel, then the UI folder.
- Drag the Slider
component to the stage.
- In the Slider properties section of the Properties panel, set the slider range by entering the minimum value in the Min field and the maximum value in the Max field.
- You may want to use the Label component to display text before the slider.
Properties
| Property | Description |
|---|---|
| Name | The component name. |
| Value | The default setting for the slider. Should be a number. |
| Min | The lowest setting on the slider. Should be a number. The default is 1. |
| Max | The highest setting on the slider. Should be a number. The default is 100. |
| Step | The granularity of the slider. For example, enter 10 to allow only multiples of 10. Enter any to allow any decimal value between the minimum and maximum. The default is 1 (allowing only integers). |
Events and actions
Events sent by the Slider componentYou can trigger other actions based on the following Slider component events:
| Event | Description |
|---|---|
| Change | Sent when a change to the slider's value is committed (e.g., the user drags the slider to one side then releases the mouse button). |
| Input | Sent when the slider's value changes. |
To select one of these events in the Event dialog, set the Slider component as the target.
Learn how to configure events.
Preview
You can't interact with UI components inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser. The appearance of UI components may vary depending on the browser.
