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

require(["esri/dijit/ClassedSizeSlider"], function(ClassedSizeSlider) { /* code goes here */ });

Description

(Added at v3.13)
A widget to assist with managing a renderer for visualizing features by varying classes and size.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/RendererSlider
|_esri/dijit/ClassedSizeSlider

Constructors

NameSummary
new ClassedSizeSlider(params, srcNodeRef)Creates a new ClassedSizeSlider widget within the provided DOM node srcNodeRef.

CSS

esri/dijit/ClassedSizeSlider | 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.
histogramWidthNumberOptional: Width of histogram in pixels.
maxValueNumberRead Only.
minValueNumberRead Only.
normalizationTypeStringOptional: Indicates how data values are normalized.
primaryHandleNumberOptional: 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 ticks 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 ClassedSizeSlider changes.
data-value-change
{
  breakInfos: <Object>,
  maxValue: <Number>,
  minValue: <Number>
}
Fires when minValue or maxValue of the ClassedSizeSlider changes.
handle-value-change
{
  breakInfos: <Object>
}
Fires when a ClassedSizeSlider 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 ClassedSizeSlider(params, srcNodeRef)

Creates a new ClassedSizeSlider widget within the provided DOM node srcNodeRef.
Parameters:
<Object> params Required Set of parameters used to specify the ClassedSizeSlider widget options.
<Node | String> srcNodeRef Required Reference or ID of the HTMLElement where the widget should be rendered.
params properties:
<Object> breakInfos Required The data map containing renderer information. Access this from the esri.renderers.smartMapping.createClassedSizeRenderer response.
[
  {minValue: 0, maxValue: 20},
  {minValue: 20, maxValue: 80},            
  {minValue: 80, maxValue: 100}
]
<String> classificationMethod Optional 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 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 The handle identified by its index value within the stops array. This value must also be in handles array.
<Number> rampWidth Optional Width of slider ramp in pixels. Default value is 26.
<Boolean> showHandles Optional Displays slider handles when true. Default is true.
<Boolean> showHistogram Optional Indicates whether to display the histogram. Default value is true.
<Boolean> showLabels Optional Displays labels when true. Default is true.
<Boolean> showTicks Optional Displays slider ticks when true. Default is true.
<Object> statistics Optional Optional: Represents the statistics data object. Access this from the esri.renderers.smartMapping.createClassedSizeRenderer response.
Sample:
require(["esri/layers/FeatureLayer", "esri/renderers/smartMapping", "esri/dijit/ClassedSizeSlider"], function (FeatureLayer, smartStyling, ClassedSizeSlider) {

  var fieldName = "C_Seq";
  var layer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
    outFields: ["*"]
  });
          
  layer.on("load", function(){
    smartStyling.createClassedSizeRenderer({
      layer: layer,
      field: fieldName,
      basemap: map.getBasemap(),
      classificationMethod: "natural-breaks"
    }).then(function(response){
            
      layer.statisticsPlugin.getHistogram({
        field: fieldName,
        numBins: 10
      }).then(function(histogram){
            
        classedSizeSliderDiv = new ClassedSizeSlider({
          breakInfos: response.renderer.infos,
          histogram: histogram,
          showLabels : true,
          showTicks: true
        }, "classedSizeSliderDiv");
        classedSizeSliderDiv.startup();
      });
    });
  });
}
Property Details

<Object> breakInfos

Required: The data map containing renderer information. Access this from the esri.renderers.smartMapping.createClassedSizeRenderer 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

<Number> histogramWidth

Optional: Width of histogram in pixels.
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: Handle identified by its index value within the stops array. primaryHandle 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 ticks marks.
Known values: true | false
Default value: true

<Object> statistics

Optional: Represents the statistics data object. Access this from the esri.renderers.smartMapping.createClassedSizeRenderer 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 ClassedSizeSlider changes.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedSizeSlider object.

data-value-change

Fires when minValue or maxValue of the ClassedSizeSlider changes.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedSizeSlider object.
<Number> maxValue Maximum value of the slider.
<Number> minValue Minimum value of the slider.

handle-value-change

Fires when a ClassedSizeSlider handle is moved.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedSizeSlider 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.