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.
|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
Events and actionsEvents sent by the Slider component
You can trigger other actions based on the following Slider component events:
|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.