Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/workers
Class: ClassedColorSlider

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

NameSummary
new ClassedColorSlider(params, srcNodeRef)Creates a new ClassedColorSlider widget.

CSS

esri/dijit/ClassedColorSlider | Download source

NameDescription
NumberTextBoxContainerNone
bottomLabelNodeNone
esriRendererSliderNone
handlerNone
handlerLabelNone
handlerTickNone
handlerTickBottomNone
handlerTickTopNone
moveableNone
sliderAreaNone
sliderAreaRightNone
sliderNodeNone
topLabelNodeNone

Properties

NameTypeSummary
breakInfosObjectRequired: The data map containing renderer information.
classificationMethodStringOptional: Indicates the classification method used to divide the range of values into bins.
handlesNumber[]Required: Handles identified by their index values within the stops array.
histogramObjectOptional: Represents the histogram data object.
histogramWidthBooleanOptional: The width of the histogram in pixels.
maxValueNumberRead Only.
minValueNumberRead Only.
normalizationTypeStringOptional: Indicates how data values are normalized.
primaryHandleNumberOptional: The handle identified by its index value within the stops array.
rampWidthNumberOptional: Width of the widget ramp in pixels.
showHandlesBooleanOptional: Indicates whether to display handles.
showHistogramBooleanOptional: Indicates whether to display the histogram.
showLabelsBooleanOptional: Indicates whether to display labels.
showTicksBooleanOptional: Indicates whether to display tick marks.
statisticsObjectOptional: Represents the statistics data object.
valuesNumber[]Required: Handle positions represented as numbers that fall between minimum and maximum.

Methods

NameReturn typeSummary
startup()NoneFinalizes 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

NameEvent ObjectSummary
change
{
  breakInfos: <Object>
}
Fires when the ClassedColorSlider widget properties change.
data-value-change
{
  breakInfos: <Object>,
  maxValue: <Number>,
  minValue: <Number>
}
Fires when minValue or maxValue of the ClassedColorSlider changes.
handle-value-change
{
  breakInfos: <Object>
}
Fires when a ClassedColorSlider handle is moved.
slide
{
  values: <Number[]>
}
Fires when the user actively slides the handle.
stop
{
  values: <Number[]>
}
Fires when the user lets go of the handle.
Constructor Details

new ClassedColorSlider(params, srcNodeRef)

Creates a new ClassedColorSlider widget.
Parameters:
<Object> params Required Set of parameters used to specify the ClassedColorSlider widget options.
<Node | String> srcNodeRef Required Reference or ID of the HTMLElement where the widget should be rendered.
params properties:
<Object> breakInfos 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}
]
<String> classificationMethod 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
<Number[]> handles Required Required: Handles identified by their index values within the stops array.
<Object> histogram Optional Represents the histogram data object. Access this from the FeatureLayerStatistics.getHistogram response.
<Number> histogramWidth Optional Width of the histogram in pixels. Default value is 100.
<String> normalizationType Optional Indicates how data values are normalized. The following types are supported:
  • field
  • log
  • percent-of-total
<Number> primaryHandle Optional Handle identified by its index value within the stops array. This value must also be in handles array.
<Number> rampWidth Optional Width of the widget ramp in pixels. Default value is 26.
<Boolean> showHandles Optional Displays slider handles when true. Default is true.
<Boolean> showHistogram Optional Displays the histogram when true. Default is true.
<Boolean> showLabels Optional Displays slider labels when true. Default is true.
<Boolean> showTicks Optional Displays ticks on slider when true. Default is true.
<Object> statistics 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> breakInfos

Required: 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> classificationMethod

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
Default value: null

<Number[]> handles

Required: Handles identified by their index values within the stops array.
Default value: []

<Object> histogram

Optional: Represents the histogram data object. Access this from the FeatureLayerStatistics.getHistogram response.
Default value: null

<Boolean> histogramWidth

Optional: The width of the histogram in pixels.
Known values: true | false
Default value: 100

<Number> maxValue

Read Only. The absolute maximum value of the slider. This value overrides the statistics max property.
Default value: 100

<Number> minValue

Read Only. The absolute minimum value of the slider. This value overrides the statistics min property.
Default value: 0

<String> normalizationType

Optional: Indicates how data values are normalized. The following types are supported:
  • field
  • log
  • percent-of-total
Default value: null

<Number> primaryHandle

Optional: The handle identified by its index value within the stops array. This value must also be in handles array.
Default value: null

<Number> rampWidth

Optional: Width of the widget ramp in pixels.
Default value: 26

<Boolean> showHandles

Optional: Indicates whether to display handles.
Known values: true | false
Default value: true

<Boolean> showHistogram

Optional: Indicates whether to display the histogram.
Known values: true | false
Default value: true

<Boolean> showLabels

Optional: Indicates whether to display labels.
Known values: true | false
Default value: true

<Boolean> showTicks

Optional: Indicates whether to display tick marks.
Known values: true | false
Default value: true

<Object> statistics

Optional: Represents the statistics data object. Access this from the esri.renderers.smartMapping.createClassedColorRenderer response.
Default value: null

<Number[]> values

Required: Handle positions represented as numbers that fall between minimum and maximum.
Default value: [50]
Method Details

startup()

Finalizes the creation of the widget.
Event Details
[ On Style Events | Connect Style Event ]

change

Fires when the ClassedColorSlider widget properties change.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedColorSlider object.

data-value-change

Fires when minValue or maxValue of the ClassedColorSlider changes.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedColorSlider object.
<Number> maxValue The current maximum value of the ClassedColorSlider.
<Number> minValue The current minimum value of the ClassedColorSlider.

handle-value-change

Fires when a ClassedColorSlider handle is moved.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedColorSlider object.

slide

Fires when the user actively slides the handle.
Event Object Properties:
<Number[]> values A temporary representation of the values property.

stop

Fires when the user lets go of the handle. Returns an array of handle positions.
Event Object Properties:
<Number[]> values An array of handle positions represented as numbers that fall between minimum and maximum.