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

package/dist/docs/vscode.html-custom-data.json

@@ -4167,11 +4167,11 @@
     },
     {
       "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.",
       "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.",
           "values": [
             {
               "name": "area"
@@ -4186,7 +4186,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.",
           "values": [
             {
               "name": "acres"
@@ -4250,7 +4250,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.",
           "values": [
             {
               "name": "centimeters"
@@ -4303,6 +4303,10 @@
         {
           "name": "Docs",
           "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-measurement/"
+        },
+        {
+          "name": "Measurement",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-measurement--demo&singleStory=true"
         }
       ]
     },
@@ -5837,6 +5841,408 @@
         }
       ]
     },
+    {
+      "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).",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-binary-color-size-legacy/"
+        },
+        {
+          "name": "Slider Binary Color Size (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-binary-color-size-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-color-legacy/"
+        },
+        {
+          "name": "Slider Classed Color (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-classed-color-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-classed-size-legacy/"
+        },
+        {
+          "name": "Slider Classed Size (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-classed-size-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-legacy/"
+        },
+        {
+          "name": "Slider Color (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-color-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-color-size-legacy/"
+        },
+        {
+          "name": "Slider Color Size (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-color-size-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-heatmap-legacy/"
+        },
+        {
+          "name": "Slider Heatmap (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-heatmap-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-opacity-legacy/"
+        },
+        {
+          "name": "Slider Opacity (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-opacity-legacy--demo&singleStory=true"
+        }
+      ]
+    },
+    {
+      "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.",
+      "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The current state of the component.",
+          "values": [
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "ready"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-slider-size-legacy/"
+        },
+        {
+          "name": "Slider Size (Legacy)",
+          "url": "https://developers.arcgis.com/javascript/latest/storybook/map-components/?path=/story/arcgis-slider-size-legacy--demo&singleStory=true"
+        }
+      ]
+    },
     {
       "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.",