DocsICP FilingConsole
官方文档
首页

Slider

更新时间：
复制 MD 格式
我的收藏

The slider component is used to display and control a numeric device property, or to display numerical data returned by an API. This guide explains how to configure the component.

Step 1: Add the component

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

  2. In the Web application editor, click the component icon 组件 on the left.

  3. In the search box above the component list on the left side of the canvas, enter Slider to find the component, and then drag it onto the canvas.

    For more information about adding components, see Add a component.

    With the slider selected, you can configure its position, size, visibility, and opacity in the Style panel on the right. You can also configure properties such as value range (minimum value, maximum value, and step), endpoint labels (whether to hide, font size, color, and font weight), and current value (always display, font size, color, and font weight).

Step 2: Configure the data source

  1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

  2. On the Data Source Configuration page, select a data source type and complete the configuration.
    The available data source types are device, API, and App Push.
    Note An API or device data source must return a single-precision number, double-precision number, or integer.
    Take the device data source as an example. In the Select Data Source panel, configure the following parameters in order: select a product, select a device (supports specified device, dynamic device, and empty device), select a Data Item type (for example, device property), and select a specific property. After you complete the configuration, you can click Format Reference to view an example or click Validate Data Format to validate the data format. After you confirm the configuration, click OK.
  3. Click OK.

Step 3: Configure styles

  1. In the Style panel on the right, configure the component's style.
    Parameter Description
    value range Sets the maximum value, minimum value, and step (the interval between values) for the slider.
    endpoint labels The labels for the minimum and maximum endpoints. You can configure the font size, color, and font weight.

    Select the Hide checkbox to hide the endpoint labels.
    current value Select Persistently Display to show the current value on the slider. You can also configure its font size, color, and font weight.
    Slider style Sets the appearance of the slider, including the thumb diameter, track color, and progress color.

  2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

  1. Select the component's Interaction tab to configure events and actions. For more information, see Interaction configuration.
    For example, when the component value changes, you can run the Set Device Property action to change the value of a device property.

  2. Click Preview in the upper-right corner of the page to preview and debug the component's data and appearance.

Previous：SwitchNext：Button