Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: ClassedColorSlider
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/ClassedColorSlider"], function(ClassedColorSlider) { /* code goes here */ });
Description
(Added at v3.13)
A widget to assist with managing a renderer used for visualizing features by their class and color.Samples
Search for samples that use this class.Class hierarchy
esri/dijit/RendererSlider |_esri/dijit/ClassedColorSlider
Constructors
| Name | Summary |
|---|---|
| new ClassedColorSlider(params, srcNodeRef) | Creates a new ClassedColorSlider widget. |
CSS
esri/dijit/ClassedColorSlider | Download source
| Name | Description |
|---|---|
| NumberTextBoxContainer | None |
| bottomLabelNode | None |
| esriRendererSlider | None |
| handler | None |
| handlerLabel | None |
| handlerTick | None |
| handlerTickBottom | None |
| handlerTickTop | None |
| moveable | None |
| sliderArea | None |
| sliderAreaRight | None |
| sliderNode | None |
| topLabelNode | None |
Properties
| Name | Type | Summary |
|---|---|---|
| breakInfos | Object | Required: The data map containing renderer information. |
| classificationMethod | String | Optional: Indicates the classification method used to divide the range of values into bins. |
| handles | Number[] | Required: Handles identified by their index values within the stops array. |
| histogram | Object | Optional: Represents the histogram data object. |
| histogramWidth | Boolean | Optional: The width of the histogram in pixels. |
| maxValue | Number | Read Only. |
| minValue | Number | Read Only. |
| normalizationType | String | Optional: Indicates how data values are normalized. |
| primaryHandle | Number | Optional: The handle identified by its index value within the stops array. |
| rampWidth | Number | Optional: Width of the widget ramp in pixels. |
| showHandles | Boolean | Optional: Indicates whether to display handles. |
| showHistogram | Boolean | Optional: Indicates whether to display the histogram. |
| showLabels | Boolean | Optional: Indicates whether to display labels. |
| showTicks | Boolean | Optional: Indicates whether to display tick marks. |
| statistics | Object | Optional: Represents the statistics data object. |
| values | Number[] | Required: Handle positions represented as numbers that fall between minimum and maximum. |
Methods
| Name | Return type | Summary |
|---|---|---|
| startup() | None | Finalizes the creation of the widget. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| data-change | {
breakInfos: < | Fires during slide and slide stop, and when a handle or the minValue or maxValue of the slider are updated via text box. |
| data-value-change | {
breakInfos: < | Fires when minValue or maxValue are updated via textbox. |
| handle-value-change | {
breakInfos: < | Fires on slide stop and when a handle is updated via textbox. |
Constructor Details
Creates a new
ClassedColorSlider widget.Parameters:
< |
Required | Set of parameters used to specify the ClassedColorSlider widget options. |
< |
Required | Reference or ID of the HTMLElement where the widget should be rendered. |
params properties: < |
Required | Data map containing renderer information. Access this from the esri.renderers.smartMapping.createClassedColorRenderer response.
[
{minValue: 0, maxValue: 20},
{minValue: 20, maxValue: 80},
{minValue: 80, maxValue: 100}
] |
< |
Optional | Indicates the classification method used to divide the range of values into bins. The following methods are supported:
Known values are: natural-breaks | equal-interval | quantile | standard-deviation | geometrical-interval |
< |
Required | Required: Handles identified by their index values within the stops array. |
< |
Optional | Represents the histogram data object. Access this from the FeatureLayerStatistics.getHistogram response. |
< |
Optional | Width of the histogram in pixels. Default value is 100. |
< |
Optional | Indicates how data values are normalized. The following types are supported:
|
< |
Optional | Handle identified by its index value within the stops array. This value must also be in handles array. |
< |
Optional | Width of the widget ramp in pixels. Default value is 26. |
< |
Optional | Displays slider handles when true. Default is true. |
< |
Optional | Displays the histogram when true. Default is true. |
< |
Optional | Displays slider labels when true. Default is true. |
< |
Optional | Displays ticks on slider when true. Default is true. |
< |
Optional | Represents the statistics data object. Access this from the esri.renderers.smartMapping.createClassedColorRenderer response. |
Sample:
require(["esri/layers/FeatureLayer", "esri/renderers/smartMapping", "esri/dijit/ClassedColorSlider",], function (FeatureLayer, smartMapping, ClassedColorSlider) {
var layer = new FeatureLayer("//services.arcgis.com/Ywxx29kRZEPq7K5N/arcgis/rest/services/co2percapita_geog30970/FeatureServer/0", {
outFields: ["*"]
});
layer.on("load", function(){
smartMapping.createClassedColorRenderer({
layer: layer,
field: "yr2009",
basemap: map.getBasemap(),
classificationMethod: "natural-breaks"
}).then(function(response){
slider7 = new ClassedColorSlider({
breakInfos: response.renderer.infos,
}, "classedColorSliderDiv");
classedColorSliderDiv.startup();
}); //end createClassedColorRenderer
}); //end load
}
Property Details
<Object
ObjectRequired: The data map containing renderer information. Access this from the
esri.renderers.smartMapping.createClassedColorRenderer response.
[
{minValue: 0, maxValue: 20},
{minValue: 20, maxValue: 80},
{minValue: 80, maxValue: 100}
]Default value:
[{minValue: 0, maxValue: 20}, {minValue: 20, maxValue: 80}, {minValue: 80, maxValue: 100}]<String
StringOptional: Indicates the classification method used to divide the range of values into bins. The following methods are supported:
Known values are:
natural-breaks | equal-interval | quantile | standard-deviation | geometrical-interval Default value:
null<Number[]
Number[]Required: Handles identified by their index values within the
stops array.Default value:
[]<Object
ObjectOptional: Represents the
histogram data object. Access this from the FeatureLayerStatistics.getHistogram response.Default value:
null<Boolean
BooleanOptional: The width of the histogram in pixels.
Known values:
true | falseDefault value:
100<Number
NumberRead Only. The absolute maximum value of the slider. This value overrides the statistics
max property.Default value:
100<Number
NumberRead Only. The absolute minimum value of the slider. This value overrides the statistics
min property.Default value:
0<String
StringOptional: Indicates how data values are normalized. The following types are supported:
- field
- log
- percent-of-total
Default value:
null<Number
NumberOptional: The handle identified by its index value within the
stops array. This value must also be in handles array.Default value:
null<Boolean
BooleanOptional: Indicates whether to display handles.
Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display the
histogram.Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display labels.
Known values:
true | falseDefault value:
true<Boolean
BooleanOptional: Indicates whether to display tick marks.
Known values:
true | falseDefault value:
true<Object
ObjectOptional: Represents the
statistics data object. Access this from the esri.renderers.smartMapping.createClassedColorRenderer response.Default value:
null<Number[]
Number[]Required: Handle positions represented as numbers that fall between
minimum and maximum.Default value:
[50]Method Details
Event Details
[ On Style Events | Connect Style Event ]
Fires during slide and slide stop, and when a handle or the
minValue or maxValue of the slider are updated via text box. Listen to this event only if the layer is rendered with WebGL. Otherwise, performance may be hampered. (Added at v3.24)Event Object Properties:
< |
Returns the breakInfos of the slider. |
< |
The maximum value of the slider. |
< |
The minimum value of the slider. |
Event Object Properties:
< |
Returns the breakInfos of the ClassedColorSlider object. |
< |
The current maximum value of the ClassedColorSlider. |
< |
The current minimum value of the ClassedColorSlider. |
Fires on slide stop and when a handle is updated via textbox.
Event Object Properties:
< |
Returns the breakInfos of the ClassedColorSlider object. |