Slider

Chart style

The slider is a control widget. You can customize the styles for the input settings, slider, and input box. You can use the slider to select a value by sliding the handle or entering a number.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Input Settings

  Parameter	Description
  Value	Set the minimum and maximum values for the slider.
  Step	Set the step value for the slider handle.

• Slider

  Parameter	Description
  Size	The size of the slider, including the width and height in px.
  Right Margin	Set the margin between the slider and the right side, in px.
  Selected Color	Set the color of the selected range on the slider.
  Track Style	The style of the slider track. Background Color: The background color of the slider track. Border Style: The border style of the slider track, including the line type, border radius, border width, and border color.
  Handle Style	The style of the slider handle. Size: The size of the handle, in px. Background Color: The background color of the handle. Border Style: The border style of the handle, including the line type, border radius, border width, and border color.
  Tooltip Style	Style for the promotion above the slider Size: The size of the tooltip, including the width and height in px. Bottom Margin: The margin between the tooltip and the slider below it. Background Color: The background color of the tooltip. Border Radius: The border radius of the tooltip. Text Style: Set the text style within the tooltip, including the font, font weight, font size, and text color.

• Input Box

  Parameter	Description
  Show	Turn on the switch to show the input box. Turn off the switch to hide the input box.
  Size	Set the size of the input box, including the width and height in px.
  Background Color	The background color of the slider.
  Border Style	The border style of the input box, including the border width, border color, border radius, and line type.
  Text Margin	The margin of the text within the input box, in px.
  Text Style	Set the text style of the input box, including the text color, font, font weight, and font size.
  Button Style	Set the style of the buttons on the right side of the input box. Button Width: The width of the buttons, in px. Default State: The style of the buttons in their default state, including the arrow size, arrow color, background color, border color, and border width. Hover State: The style of the buttons when you hover the mouse over them, including the arrow size, arrow color, background color, border color, and border width.

Data panel

Field description

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction panel

The Slider widget has an interaction feature that you can enable by selecting Enable to the right of On Value Change. When the value in the input box changes, the widget triggers a data request and returns a callback value that other widgets can use. By default, the callback returns the value field configured on the Data panel. For more information, see Configure a widget callback ID.

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Slider widget in the Imported Nodes section. The configuration parameters for the Slider widget appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When Data API Request Succeeded	This event is triggered when the data API request is successful and the data is processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When Data API Request Failed	This event is triggered when the data API request fails due to a network issue or an API error and the data is processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     On Value Change	This event is triggered when the current value changes. The corresponding data item is also returned.

   • Actions

     Action	Description
     Request Data API	Requests server-side data again. Data from input data processing nodes or layer nodes is used as parameters. For example, if the slider's API data source is set to https://api.test and the data passed to the Request Data API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import Data API	After you format the data for the component, you can import and redraw it. You do not need to request server-side data again. For a data example, see the Data Response Result area on the Data tab in the component configuration panel on the right side of the canvas editor.
     Get Current Value	Gets the current value of the input box.
     Reset to Default	Resets the widget data to its default values.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. In the widget's Configuration panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint Editor configuration page as needed.
     Show	Shows the widget. The following code provides a data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the widget. The following code provides a data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle Visibility	Toggles the visibility of the widget. The following code provides a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the widget to a specified position. The following code provides a data example. return { // The method of movement. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Optional values: linear, easeInOutQuad, and easeInOutExpo. "animationEasing": "linear" } };