The Slider component

This component is not supported for Google Ads, Google AdMob, AMPHTML adsvideo 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:

  1. Open the Components panel, then the UI folder.
  2. Drag the Slider  component to the stage.
  3. 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.
  4. You may want to use the Label component to display text before the slider.


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 component

You 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.


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.

Was this helpful?
How can we improve it?
Clear search
Close search
Google apps
Main menu
Search Help Center