DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Mobile Visual Development Components Control components Slider

Slider

Updated at:
Copy as MD
My Favorites

The slider component lets you display and control a numeric device property, or display numeric data returned by an API.

Step 1: Add the component

  1. Create a mobile application. For more information, see Create a mobile application.

  2. In the mobile application editor, click the Components icon 组件 on the far left.

  3. (Optional) Add a column component to configure the layout of your application page. For more information, see Horizontal and vertical columns.

  4. Above the component list on the left of the canvas, enter slider in the search box to find the component, then drag it onto the canvas.

    For more information about adding components, see Add components.

    After you add the component, configure its properties in the Style panel on the right. These include basic properties such as Opacity, Width, and Height; value range (Min, Max, Step, and Unit); and slider style (Show Icon, Color Theme, and Style). You can also click Configure Data Source to set the data source.

Step 2: Configure the data source

  1. In the Style panel on the right, click Configure Data Source next to Display Data.

  2. On the Data Source Configuration page, configure the data source.

    Supported data source types are Device, API, and App Push.

    Note

    The data source must return a single-precision number, double-precision number, or integer.

  3. Click OK to complete the configuration.

Step 3: Configure styles

  1. In the Style panel on the right, configure the component's display settings.

    Parameter

    Description

    Value range

    Sets the min, max, step (tick interval), and unit for the slider.

    Slider style

    Sets the slider's progress color, style, and icon visibility.

  2. Adjust the component's width, height, and position on the page. For more information, see General styles.

Step 4: Configure interactions

  1. In the Interaction panel on the right, click Add Interaction to set an event and an action.

    This component supports the value change event. For example, you can configure the Set Device Property action to trigger on the value change event. This action sends a command to a device to modify a property value.

    For more information, see Interaction configuration.

  2. Preview and debug the component's data and appearance. For more information, see Preview and debug.

Previous：SwitchNext：Media components