@arcgis/map-components 5.0.0-next.124 → 5.0.0-next.126

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@arcgis/map-components",
-  "version": "5.0.0-next.124",
+  "version": "5.0.0-next.126",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1429,12 +1429,12 @@
           "events": [
             {
               "name": "arcgisBookmarkEdit",
-              "type": "BookmarksViewModelBookmarkEditEvent",
+              "type": "{ bookmark: Bookmark; }",
               "description": "Fires when a [Bookmark](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html) is edited."
             },
             {
               "name": "arcgisBookmarkSelect",
-              "type": "BookmarksViewModelBookmarkSelectEvent",
+              "type": "{ bookmark: Bookmark; }",
               "description": "Fires when a [Bookmark](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html) is selected."
             },
             {
@@ -1472,13 +1472,13 @@
               },
               {
                 "name": "defaultCreateOptions",
-                "description": "Specifies how new bookmarks will be created if [showAddBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showAddBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is created. See [BookmarkOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks-BookmarksViewModel.html#BookmarkOptions)\nfor the full list of options.",
-                "type": "BookmarkOptions"
+                "description": "Specifies how new bookmarks will be created if [showAddBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showAddBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is created.",
+                "type": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}"
               },
               {
                 "name": "defaultEditOptions",
-                "description": "Specifies how bookmarks will be edited, if [showEditBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showEditBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is edited. See [BookmarkOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks-BookmarksViewModel.html#BookmarkOptions)\nfor the full list of options.",
-                "type": "BookmarkOptions"
+                "description": "Specifies how bookmarks will be edited, if [showEditBookmarkButton](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-bookmarks/#showEditBookmarkButton) is set to `true`.\nCan be used to enable or disable taking screenshots or capturing the bookmark's viewpoint based on the current\nview when a bookmark is edited.",
+                "type": "{\n    captureRotation?: boolean | undefined;\n    captureScale?: boolean | undefined;\n    captureTimeExtent?: boolean | undefined;\n    captureViewpoint?: boolean | undefined;\n    screenshotSettings?: Partial<UserSettings> | undefined;\n    takeScreenshot?: boolean | undefined;\n}"
               },
               {
                 "name": "disabled",
@@ -1594,12 +1594,12 @@
             "events": [
               {
                 "name": "arcgisBookmarkEdit",
-                "type": "BookmarksViewModelBookmarkEditEvent",
+                "type": "{ bookmark: Bookmark; }",
                 "description": "Fires when a [Bookmark](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html) is edited."
               },
               {
                 "name": "arcgisBookmarkSelect",
-                "type": "BookmarksViewModelBookmarkSelectEvent",
+                "type": "{ bookmark: Bookmark; }",
                 "description": "Fires when a [Bookmark](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html) is selected."
               },
               {
@@ -1650,6 +1650,7 @@
             },
             {
               "name": "hide-disciplines",
+              "description": "Hides the disciplines tree from the UI.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -1657,6 +1658,7 @@
             },
             {
               "name": "hide-levels",
+              "description": "Hides the levels filter from the UI.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -1664,6 +1666,7 @@
             },
             {
               "name": "hide-phases",
+              "description": "Hides the phases filter from the UI.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -1729,14 +1732,17 @@
               },
               {
                 "name": "hideDisciplines",
+                "description": "Hides the disciplines tree from the UI.",
                 "type": "boolean"
               },
               {
                 "name": "hideLevels",
+                "description": "Hides the levels filter from the UI.",
                 "type": "boolean"
               },
               {
                 "name": "hidePhases",
+                "description": "Hides the phases filter from the UI.",
                 "type": "boolean"
               },
               {
@@ -1751,7 +1757,7 @@
               },
               {
                 "name": "layers",
-                "description": "An array of layers of type [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html) that are added to the component for exploration.\n\n[Read more](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BuildingExplorer.html#layers)",
+                "description": "A list of layers of type [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html) that are added to the component for exploration.\n\nThe component UI is only displayed when this property is set. In case of multiple layers, the component will display and apply the filters on all layers.",
                 "type": "Array<BuildingSceneLayer>"
               },
               {
@@ -1761,12 +1767,12 @@
               },
               {
                 "name": "levelDisabled",
-                "description": "Indicates whether the level picker and filter is disabled.",
+                "description": "Indicates whether the level picker and filter is disabled. If `true`, the filters expression won't be used to filter a [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).",
                 "type": "boolean"
               },
               {
                 "name": "levels",
-                "description": "The selectable building levels.",
+                "description": "List of the building level values which are allowed for the levels filter.",
                 "type": "ReadonlyArray<number>"
               },
               {
@@ -1776,12 +1782,12 @@
               },
               {
                 "name": "phaseDisabled",
-                "description": "Indicates whether the phase picker and filter is disabled.",
+                "description": "Indicates whether the phase picker and filter is disabled. If `true`, the filters expression won't be used to filter a [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).",
                 "type": "boolean"
               },
               {
                 "name": "phases",
-                "description": "The selectable construction phases.",
+                "description": "List of the building phase values which are allowed for the phases filter.",
                 "type": "ReadonlyArray<number>"
               },
               {
@@ -10467,12 +10473,12 @@
         },
         {
           "name": "arcgis-measurement",
-          "description": "### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n\n### Methods\n- `clear(): Promise<void>`\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `startMeasurement(): Promise<void>`",
+          "description": "The Measurement component groups and manages multiple measurement tools and allows you to easily switch between them using\nthe [activeTool](#activeTool) property. The tools correspond to the measurement components for area and distance in 2D\n[arcgis-area-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-2d/), [arcgis-distance-measurement-2d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-distance-measurement-2d/) and in 3D\n[arcgis-area-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-3d/), [arcgis-direct-line-measurement-3d](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-direct-line-measurement-3d/).\n\nThis component follows a composite pattern that allows developers to configure the UI to best match their specific requirements.\nThe measurement tools, placements, and icons can all be configured, which offers great flexibility to use with tabbed\ninterfaces or other customized UI.\n\nHow distances, areas, and perimeters are computed depends on the view type and its spatial reference.\n\nIn 2D Maps:\n- In geographic coordinate systems (GCS) and in Web Mercator, they are computed geodetically.\n- In projected coordinate systems (PCS), apart from Web Mercator, they are computed\n  in a Euclidean manner (in their respective PCS).\n\nIn 3D Scenes:\n- In geographic coordinate systems (GCS) and in Web Mercator:\n  - horizontal distance is computed geodetically;\n  - vertical distance is computed as a difference in z-values;\n  - direct distance is computed in a Euclidean manner;\n  - area and perimeter are computed:\n    - in a Euclidean manner if the perimeter is below 100km;\n    - geodetically if the perimeter is above 100km.\n- In projected coordinate systems (PCS), apart from Web Mercator:\n  - all three distances (direct, horizontal, and vertical), areas, and perimeters are computed in a Euclidean manner (in their respective PCS).\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n\n### Methods\n- `clear(): Promise<void>` - Removes all measurement widgets and associated graphics.\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `startMeasurement(): Promise<void>` - Starts a new measurement for the active measurement widget.",
           "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-measurement/",
           "attributes": [
             {
               "name": "active-tool",
-              "description": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works for both [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) and\n[SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). To measure distance in a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)\nset the property to `distance` and in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
+              "description": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works in both [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) and [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/). To measure distance in a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/),\nset the property to `distance` and in a [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
               "value": {
                 "type": [
                   "\"area\"",
@@ -10483,7 +10489,7 @@
             },
             {
               "name": "area-unit",
-              "description": "Unit system (imperial, metric) or specific unit used for displaying the area values.\nPossible values are: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-nautical-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.",
+              "description": "Unit system (imperial, metric) or specific unit used for displaying the area values.",
               "value": {
                 "type": [
                   "\"acres\"",
@@ -10522,7 +10528,7 @@
             },
             {
               "name": "linear-unit",
-              "description": "Unit system (imperial, metric) or specific unit used for displaying the distance values.\nPossible values are: `metric`, `imperial`, `inches`, `feet`, `us-feet`, `yards`, `miles`, `nautical-miles`, `meters`, `kilometers`.",
+              "description": "Unit system (imperial, metric) or specific unit used for displaying the distance values.",
               "value": {
                 "type": [
                   "\"centimeters\"",
@@ -10565,7 +10571,7 @@
             "properties": [
               {
                 "name": "activeTool",
-                "description": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works for both [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) and\n[SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). To measure distance in a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html)\nset the property to `distance` and in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
+                "description": "Specifies the current measurement tool to display. Setting its value to `area` activates\nthe area measurement tool and it works in both [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) and [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/). To measure distance in a [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/),\nset the property to `distance` and in a [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) set it to `direct-line`.\nIf this property is not set, the component will not be displayed.",
                 "type": "\"area\" | \"direct-line\" | \"distance\""
               },
               {
@@ -10575,7 +10581,7 @@
               },
               {
                 "name": "areaUnit",
-                "description": "Unit system (imperial, metric) or specific unit used for displaying the area values.\nPossible values are: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-nautical-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.",
+                "description": "Unit system (imperial, metric) or specific unit used for displaying the area values.",
                 "type": "\"acres\" | \"ares\" | \"hectares\" | \"imperial\" | \"metric\" | \"square-centimeters\" | \"square-decimeters\" | \"square-feet\" | \"square-inches\" | \"square-kilometers\" | \"square-meters\" | \"square-miles\" | \"square-millimeters\" | \"square-nautical-miles\" | \"square-us-feet\" | \"square-yards\""
               },
               {
@@ -10595,7 +10601,7 @@
               },
               {
                 "name": "linearUnit",
-                "description": "Unit system (imperial, metric) or specific unit used for displaying the distance values.\nPossible values are: `metric`, `imperial`, `inches`, `feet`, `us-feet`, `yards`, `miles`, `nautical-miles`, `meters`, `kilometers`.",
+                "description": "Unit system (imperial, metric) or specific unit used for displaying the distance values.",
                 "type": "\"centimeters\" | \"decimeters\" | \"feet\" | \"imperial\" | \"inches\" | \"kilometers\" | \"meters\" | \"metric\" | \"miles\" | \"millimeters\" | \"nautical-miles\" | \"us-feet\" | \"yards\""
               },
               {
@@ -14781,6 +14787,1088 @@
             ]
           }
         },
+        {
+          "name": "arcgis-slider-binary-color-size-legacy",
+          "description": "The Binary Color Size Slider (Legacy) component is intended for authoring and exploring diverging data-driven visualizations in any\nlayer that can be rendered with an above and below theme for a [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html).\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-BinaryColorSizeSlider.html#fromRendererResult)\nmethod can be used to intelligently populate slider properties including [max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nconfiguration, and the slider's histogram after the renderer has been created from the result of the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer) method.\n\n```js\nconst univariateColorSizeRendererCreator = await import(\n  \"@arcgis/core/smartMapping/renderers/univariateColorSize.js\"\n);\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst binaryColorSizeSlider = document.querySelector(\"arcgis-slider-binary-color-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  theme: \"above-and-below\" as UnivariateTheme,\n};\n\nconst rendererResult = await univariateColorSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait binaryColorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update an above and below (diverging) visualization in a layer's renderer.\nIt is the responsibility of the app developer to set up event listeners on that update the size variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const result = await binaryColorSizeSlider.updateRenderer(featureLayer.renderer as ClassBreaksRenderer);\n  featureLayer.renderer = result;\n};\n\nbinaryColorSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nbinaryColorSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>` - A convenience function used to update the properties of a BinaryColorSizeSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#RendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod. This method is useful for cases when the app allows the end user to switch data variables used to render the data.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.\n- `updateRenderer(renderer: ClassBreaksRenderer): Promise<ClassBreaksRenderer | nil>` - A convenience function used to update the input renderer based on\nthe values of the slider [stops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-BinaryColorSizeSlider.html#stops).",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-binary-color-size-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-binary-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-binary-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-classed-color-legacy",
+          "description": "The Classed Color Slider (Legacy) component is designed for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with color in a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ClassedColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/classedcolorslider-labels.png \"ClassedColorSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedColorSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos) configuration,\nand the slider's histogram after the renderer has been created from the result of the\n[createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createClassBreaksRenderer) method.\n\n```js\nconst colorRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/color.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst classedColorSlider = document.querySelector(\"arcgis-slider-classed-color\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  numClasses: 4\n};\n\nconst rendererResult = await colorRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedColorSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nin a ClassBreaksRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the breaks of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n\n  const updatedClassBreakInfos = await classedColorSlider.updateClassBreakInfos(renderer.classBreakInfos);\n  if (!updatedClassBreakInfos) {\n    return;\n  }\n\n  renderer.classBreakInfos = updatedClassBreakInfos;\n  featureLayer.renderer = renderer;\n};\n\nclassedColorSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nclassedColorSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateClassBreakInfos(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>` - A convenience function used to update the\n[classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nof a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) associated with this slider.\n\nThe number of breaks from the renderer must match the number of breaks in the slider.\nGenerally, the input breaks for this method should come from the same renderer as one\nused to create the slider with the [fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedColorSlider.html#fromRendererResult) method.\n- `updateFromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>` - A convenience function used to update the properties a ClassedColorSlider from the result\nof the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createClassBreaksRenderer) method.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-color-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-classed-size-legacy",
+          "description": "The Classed Size Slider (Legacy) component is designed for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with size in a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ClassedSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/classedsizeslider-labels.png \"ClassedSizeSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedSizeSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos) configuration,\nand the slider's histogram after the renderer has been created from the result of the [createClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createClassBreaksRenderer)\nmethod.\n\n```js\nconst sizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/size.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst classedSizeSlider = document.querySelector(\"arcgis-slider-classed-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Median_Income_by_Race_and_Age_Selp_Emp_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B19049_001E\",\n  view: viewElement.view,\n  numClasses: 4,\n};\n\nconst rendererResult = await sizeRendererCreator.createClassBreaksRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait classedSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the [classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nin a ClassBreaksRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the breaks of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = async () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"classBreakInfos\" in renderer) || !renderer.classBreakInfos?.[0]) {\n    return;\n  }\n  renderer.classBreakInfos = (await classedSizeSlider.updateClassBreakInfos(renderer.classBreakInfos)) as any;\n  featureLayer.renderer = renderer;\n};\n\nclassedSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nclassedSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateClassBreakInfos(breakInfos: ClassBreakInfo[]): Promise<ClassBreakInfo[] | nil>` - A convenience function used to update the\n[classBreakInfos](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html#classBreakInfos)\nof a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-ClassBreaksRenderer.html) associated with this slider.\n\nThe number of breaks from the renderer must match the number of breaks in the slider.\nGenerally, the input breaks for this method should come from the same renderer as one\nused to create the slider with the [fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ClassedSizeSlider.html#fromRendererResult) method.\n- `updateFromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): Promise<void>` - A convenience function used to update the properties a ClassedSizeSlider from the result\nof the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createClassBreaksRenderer) method.\nThis method is used to configure an empty ClassedSizeSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-size-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the breaks of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-color-legacy",
+          "description": "The Color Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![ColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorslider-2-labels.png \"ColorSlider with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), the [color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) configuration,\nand the slider's histogram after the renderer has been created from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createContinuousRenderer) method.\n\n```js\nconst colorRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/color.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst colorSlider = document.querySelector(\"arcgis-slider-color\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params: ContinuousRendererParameters = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n  theme: \"above-and-below\",\n};\n\nconst rendererResult = await colorRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\ncolorSlider.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update a [color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update the color variable of the appropriate renderer.\n\n```js\ncolorSlider.updateFromRendererResult(rendererResult, histogramResult);\n\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const colorVariable = renderer.visualVariables[0].clone() as __esri.ColorVariable;\n  colorVariable.stops = colorSlider.stops;\n\n  renderer.visualVariables = [colorVariable];\n  featureLayer.renderer = renderer;\n};\n\ncolorSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\ncolorSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateFromRendererResult(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void` - A convenience function used to update the properties of a ColorSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#ContinuousRendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-color.html#createContinuousRenderer)\nmethod. This method is used to configure an empty ColorSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the component.\nTypically used when the component is controlled by another component (e.g. by the Expand component).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "stops",
+                "description": "The color stops from the [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nto link to the slider. The colors in these stops will be used\nto render the color gradient on the slider's track. They should match the colors\nrendered in the associated layer's renderer.",
+                "type": "Array<ColorStop>"
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-color-size-legacy",
+          "description": "The Color Size Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) and\na [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html). Both visual variables should be used\nto visualize the same data variable.\n\nThis slider and visualization style is designed specifically for\n3D thematic visualizations where both size and color are used to visualize the same data variable in order\nto minimize confusion because of distortion in perception. For example, a visualization of extruded points\nmay be difficult to understand if two features of similar sizes (and therefore data values) are located\nfar apart from one another; the feature furthest from the [Camera](https://developers.arcgis.com/javascript/latest/api-reference/esri-Camera.html) will appear smaller than\nthe feature closer to the camera. The color variable can help the user understand that both features have similar values.\n\n![Slider Color Size with perspective](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorsizeslider-perspective.png \"Slider Color Size with perspective\")\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![Slider Color Size with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/colorsizeslider-labels.png \"Slider Color Size with annotations\")\n\nThe [updateFromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#fromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) configuration,\n[color visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) configuration, and the slider's histogram after the\nrenderer has been created from the result of the [createContinuousRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer) method.\n\n```js\nconst colorAndSizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/univariateColorSize.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst colorSizeSlider = document.querySelector(\"arcgis-slider-color-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  field: \"B17020_calc_pctPovE\",\n  view: viewElement.view,\n};\n\nconst rendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait colorSizeSlider?.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update the matching [color](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html)\nand [size](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) visual variables in a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider that update these variables in the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer?.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n  renderer.visualVariables = colorSizeSlider.updateVisualVariables(\n    renderer.visualVariables as VisualVariable[],\n  );\n  featureLayer.renderer = renderer;\n};\n\ncolorSizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\ncolorSizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateFromRendererResult(rendererResult: RendererResult, histogramResult?: HistogramResult): Promise<void>` - A convenience function used to update the properties of a Slider Color Size component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#RendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod. Note that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.\n- `updateVisualVariables(variables: VisualVariable[]): VisualVariable[]` - A convenience function used to update the visual variables of a renderer generated with the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)\nmethod with the values obtained from the slider. This method is useful for cases when the app allows the end user to switch data variables\nused to render the data.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-size-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult()](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the color and size variables of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-heatmap-legacy",
+          "description": "The Heatmap Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [HeatmapRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![HeatmapSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/heatmapslider-labels.png \"HeatmapSlider with annotations\")\n\n```js\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst heatmapSlider = document.querySelector(\"arcgis-slider-heatmap-legacy\")!;\n\nconst layer = new CSVLayer({\n  url: \"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(layer);\n\nconst params = {\n  layer,\n  valueExpression: \"($feature.mag)\",\n  view: viewElement.view,\n};\n\nconst rendererResult = await heatmapRendererCreator.createRenderer(params);\n\nlayer.renderer = rendererResult.renderer;\n\nheatmapSlider.stops = rendererResult.renderer.colorStops;\n```\n\nThis slider should be used to update the [colorStops](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html#colorStops)\nproperty in a HeatmapRenderer. It is the responsibility of the app developer\nto set up event listeners on this slider to update the renderer's colorStops based on how the [stops](#stops) property was recalculated.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = layer.renderer?.clone();\n  if (!renderer || !(\"colorStops\" in renderer)) {\n    return;\n  }\n  renderer.colorStops = heatmapSlider.stops;\n  layer.renderer = renderer;\n};\n\nheatmapSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nheatmapSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-heatmap-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-heatmap-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-heatmap-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              },
+              {
+                "name": "stops",
+                "description": "The color stops of the [HeatmapRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-HeatmapRenderer.html) to associate with the slider.",
+                "type": "Array<HeatmapColorStop>"
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-opacity-legacy",
+          "description": "The Opacity Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with an [OpacityVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![OpacitySlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/opacityslider-labels.png \"OpacitySlider with annotations\")\n\nThe [updateFromVisualVariableResult()](#updateFromVisualVariableResult()) method can be used to intelligently populate slider properties including [max](#max), [min](#min),\nthe [opacity visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html) configuration,\nand the slider's histogram after the renderer has been created from the result of the\n[createVisualVariable()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#createVisualVariable) method.\n\n```js\nconst opacityVariableCreator = await import(\"@arcgis/core/smartMapping/renderers/opacity.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst opacitySlider = document.querySelector(\"arcgis-slider-opacity\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Census_2020_DHC_Total_Population/FeatureServer/2\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  view: viewElement.view,\n  field: \"P002_calc_pct0002\",\n};\n\nconst variableResult = await opacityVariableCreator.createVisualVariable(params);\n\nif (featureLayer.renderer && \"visualVariables\" in featureLayer.renderer) {\n  featureLayer.renderer.visualVariables = [variableResult.visualVariable];\n}\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nawait opacitySlider.updateFromVisualVariableResult(variableResult, histogramResult);\n```\n\nThis slider should be used to update an [opacity visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners on this slider to update the opacity variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const visualVariable = renderer.visualVariables[0];\n  if (visualVariable.type !== \"opacity\") {\n    return;\n  }\n\n  const opacityVariable = visualVariable.clone();\n  opacityVariable.stops = opacitySlider.stops;\n  renderer.visualVariables = [opacityVariable];\n  featureLayer.renderer = renderer;\n};\n\nopacitySlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nopacitySlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateFromVisualVariableResult(visualVariable: VisualVariableResult, histogramResult?: HistogramResult): Promise<void>` - A convenience function used to update the properties of an OpacitySlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#VisualVariableResult) of\nthe [createVisualVariable()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-opacity.html#createVisualVariable)\nmethod. This method is used to configure an empty OpacitySlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-opacity-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-opacity-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-opacity-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromVisualVariableResult()](#updateFromVisualVariableResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the opacity variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              },
+              {
+                "name": "stops",
+                "description": "The opacity stops from the [OpacityVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-OpacityVariable.html)\nto link to the slider. The opacity values in these stops will be used\nto render the gradient on the slider. They should match the opacity\nrendered in the associated layer's opacity visual variable.",
+                "type": "Array<OpacityStop>"
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
+        {
+          "name": "arcgis-slider-size-legacy",
+          "description": "The Size Slider (Legacy) component is intended for authoring and exploring data-driven visualizations in any\nlayer that can be rendered with a [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html).\n\n<span id=\"image-annotations\"></span>\nSee the image below for a summary of the configurable options available on this slider.\n\n![SizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/sizeslider-labels.png \"SizeSlider with annotations\")\n\nThe [updateFromRendererResult()](#updateFromRendererResult) method can be used to intelligently populate slider properties including\n[max](#max), [min](#min), [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nintervals, and the slider's histogram after the renderer has been created from the result of the\n[createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createContinuousRenderer) method.\n\n```js\nconst sizeRendererCreator = await import(\"@arcgis/core/smartMapping/renderers/size.js\");\nconst viewElement = document.querySelector(\"arcgis-map\")!;\nconst sizeSlider = document.querySelector(\"arcgis-slider-size\")!;\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Major_Cities_/FeatureServer/0\",\n});\n\nawait viewElement.viewOnReady();\nviewElement.map?.add(featureLayer);\n\nconst params = {\n  layer: featureLayer,\n  view: viewElement.view,\n  field: \"POPULATION\",\n};\n\nconst rendererResult = await sizeRendererCreator.createContinuousRenderer(params);\n\nfeatureLayer.renderer = rendererResult.renderer;\n\nconst histogramResult = await histogram({\n  ...params,\n  numBins: 30,\n});\n\nsizeSlider.updateFromRendererResult(rendererResult, histogramResult);\n```\n\nThis slider should be used to update a [size visual variable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nin a layer's renderer. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.\n\n```js\nconst updateRendererFromSlider = () => {\n  const renderer = featureLayer.renderer?.clone();\n  if (!renderer || !(\"visualVariables\" in renderer) || !renderer.visualVariables?.[0]) {\n    return;\n  }\n\n  const sizeVariable = renderer.visualVariables[0] as __esri.SizeVariable;\n  const updatedSizeVariable = sizeSlider.updateVisualVariable(sizeVariable);\n  if (!updatedSizeVariable) {\n    return;\n  }\n\n  renderer.visualVariables = [updatedSizeVariable];\n  featureLayer.renderer = renderer;\n};\n\nsizeSlider.addEventListener(\"arcgisThumbChange\", updateRendererFromSlider);\nsizeSlider.addEventListener(\"arcgisThumbDrag\", updateRendererFromSlider);\n```\n--\n\n### Events\n- **arcgisPropertyChange** - Emitted when the value of a property is changed. Use this to listen to changes to properties.\n- **arcgisReady** - Emitted when the component associated with a map or scene view is ready to be interacted with.\n- **arcgisThumbChange** - Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.\n- **arcgisThumbDrag** - Fires when a user drags a thumb on the component.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `destroy(): Promise<void>` - Permanently destroy the component.\n- `updateFromRendererResult(rendererResult: ContinuousRendererResult, histogramResult?: HistogramResult): void` - A convenience function used to update the properties of a SizeSlider component instance from the\n[result](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#ContinuousRendererResult) of\nthe [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-size.html#createContinuousRenderer)\nmethod. This method is used to configure an empty SizeSlider to be used with the layer data, and is useful for cases when the app allows the end user to switch data variables.\nNote that this method always expects `rendererResult` to be defined for the slider to function, but `histogramResult` is optional.\n- `updateVisualVariable(sizeVariable: __esri.SizeVariable): __esri.SizeVariable | nil` - A convenience function used to update the [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html)\nto match the values of the [stops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SizeSlider.html#stops) on the slider.\nThe slider stops are automatically updated internally when the user drags a thumb slider.\n\nThis is particularly useful for Size visual variables that have a set\n[minDataValue](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html#minDataValue) and\n[maxDataValue](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html#minDataValue).\nThis method will properly reconstruct the variable to set on the renderer so it matches the stops on the slider.",
+          "doc-url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-size-legacy/",
+          "attributes": [
+            {
+              "name": "auto-destroy-disabled",
+              "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "max",
+              "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "min",
+              "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "precision",
+              "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+              "default": "4",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "reference-element",
+              "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "state",
+              "description": "The current state of the component.",
+              "value": {
+                "type": [
+                  "\"disabled\"",
+                  "\"ready\""
+                ]
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "arcgisPropertyChange",
+              "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+              "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+            },
+            {
+              "name": "arcgisReady",
+              "type": "void",
+              "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+            },
+            {
+              "name": "arcgisThumbChange",
+              "type": "ThumbChangeEvent",
+              "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+            },
+            {
+              "name": "arcgisThumbDrag",
+              "type": "ThumbDragEvent",
+              "description": "Fires when a user drags a thumb on the component."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "autoDestroyDisabled",
+                "description": "If true, the component will not be destroyed automatically when it is\ndisconnected from the document. This is useful when you want to move the\ncomponent to a different place on the page, or temporarily hide it. If this\nis set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-size-legacy/#destroy) method when you are done to\nprevent memory leaks.",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "Icon which represents the widget. It is typically used when the widget is controlled by another\none (e.g. in the Expand widget).",
+                "type": "IconName"
+              },
+              {
+                "name": "max",
+                "description": "The maximum value or upper bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the max value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "The minimum value or lower bound of the slider. Once the slider has rendered with the [updateFromRendererResult](#updateFromRendererResult) method,\nthe user may change this property by selecting the label containing the min value on the slider UI. It is the responsibility of the app developer\nto set up event listeners that update the size variable of the appropriate renderer.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "Defines how slider thumb values should be rounded. This number indicates the number\nof decimal places slider thumb _values_ should round to when they have been moved.\n\nKeep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderViewModel.html#values) and shouldn't be used exclusively\nfor formatting purposes.",
+                "type": "number"
+              },
+              {
+                "name": "referenceElement",
+                "description": "By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.",
+                "type": "HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string"
+              },
+              {
+                "name": "state",
+                "description": "The current state of the component.",
+                "type": "\"disabled\" | \"ready\""
+              }
+            ],
+            "events": [
+              {
+                "name": "arcgisPropertyChange",
+                "type": "{ name: \"state\" | \"max\" | \"min\" | \"precision\"; }",
+                "description": "Emitted when the value of a property is changed. Use this to listen to changes to properties."
+              },
+              {
+                "name": "arcgisReady",
+                "type": "void",
+                "description": "Emitted when the component associated with a map or scene view is ready to be interacted with."
+              },
+              {
+                "name": "arcgisThumbChange",
+                "type": "ThumbChangeEvent",
+                "description": "Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider."
+              },
+              {
+                "name": "arcgisThumbDrag",
+                "type": "ThumbDragEvent",
+                "description": "Fires when a user drags a thumb on the component."
+              }
+            ]
+          }
+        },
         {
           "name": "arcgis-color-select",
           "description": "Labeled swatch which opens a color picker popover to select a color.\n--\n\n### Events\n- **arcgisColorChanged** - Emitted when the color value changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.",