Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
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
data-change
{
  breakInfos: <Object[]>,
  maxValue: <Number>,
  minValue: <Number>
}
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: <Object>,
  maxValue: <Number>,
  minValue: <Number>
}
Fires when minValue or maxValue are updated via textbox.
handle-value-change
{
  breakInfos: <Object>
}
Fires on slide stop and when a handle is updated via textbox.
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 ]

data-change

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:
<Object[]> breakInfos Returns the breakInfos of the slider.
<Number> maxValue The maximum value of the slider.
<Number> minValue The minimum value of the slider.

data-value-change

Fires when minValue or maxValue are updated via textbox.
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 on slide stop and when a handle is updated via textbox.
Event Object Properties:
<Object> breakInfos Returns the breakInfos of the ClassedSizeSlider object.
Show Modal