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

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

Description

(Added at v3.13)
A widget to assist with managing size with a renderer.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/RendererSlider
|_esri/dijit/SizeInfoSlider

Constructors

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

CSS

esri/dijit/SizeInfoSlider | Download source

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

Properties

NameTypeSummary
handlesNumber[]Required: Handles identified by their index values within the stops array.
histogramObjectOptional: Represents the histogram data object.
histogramWidthNumberOptional: Width of the histogram in pixels.
maxValueNumberOptional: The absolute maximum value of the slider.
minValueNumberOptional: The absolute minimum value of the slider.
primaryHandleNumberOptional: The handle identified by its index value within the stops array.
rampWidthNumberOptional: Represents the width of the SVG ramp in pixels.
showHandlesBooleanOptional: Indicates whether to display slider handles.
showHistogramBooleanOptional: Indicates whether to display the histogram.
showLabelsBooleanOptional: Indicates whether to display the slider labels.
showTicksBooleanOptional: Indicates whether to display the slider tick marks.
sizeInfoObjectRequired: Defines the size of the symbol where feature size is proportional to data value.
statisticsObjectOptional: Represents the statistics data object.
symbolSimpleMarkerSymbol | SimpleLineSymbolRequired: The SimpleLineSymbol or SimpleMarkerSymbol used with the widget.
valuesNumber[]Required: Handle positions represented as numbers that fall between minimum and maximum.
zoomOptionsObjectOptional: Additional options to customize slider.

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
{
  maxValue: <Number>,
  minValue: <Number>,
  sizeInfo: <Object>
}
Fires during slide and slide stop, and when a handle or the minValue or maxValue of the SizeInfoSlider are updated via text box.
data-value-change
{
  maxValue: <Number>,
  minValue: <Number>,
  sizeInfo: <Object>
}
Fires when minValue or maxValue of the SizeInfoSlider changes.
handle-value-change
{
  sizeInfo: <Object>
}
Fires on slide stop and when a handle is updated via textbox.
zoomed
{
  zoomed: <Boolean>
}
Fires when the zoom state changes.
Constructor Details

new SizeInfoSlider(params, srcNodeRef)

Creates a new SizeInfoSlider widget.
Parameters:
<Object> params Required Set of parameters used to specify the SizeInfoSlider widget options.
<Node | String> srcNodeRef Required Reference or ID of the HTMLElement where the widget should be rendered.
params properties:
<Number[]> handles 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. Default value is null. See the object specifications table below for the structure of the returned histogram object.
<Number> histogramWidth Optional Width of the histogram in pixels. Default is 100.
<Number> maxValue Optional The absolute maximum value of the slider. NOTE: This value overrides the statistics max property. Default value is 100.
<Number> minValue Optional The absolute minimum value of the slider. NOTE: This value overrides the statistics min property. Default value is 0.
<Number> primaryHandle Optional The handle identified by its index value within the stops array. This value must also be in handles array. Default value is null.
<Number> rampWidth Optional Represents the width of the SVG ramp in pixels. Default 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 labels when true. Default is true.
<Boolean> showTicks Optional Displays slider ticks when true. Default is true.
<Object> sizeInfo Required Defines the size of the symbol where feature size is proportional to data value. See Renderer.sizeInfo for additional information.
<Object> statistics Optional Represents the statistics data object. Use the renderer.statistics from smartMapping.createSizeRenderer response.
<Symbol> symbol Required The SimpleLineSymbol or SimpleMarkerSymbol used with the widget. Note that only these two symbol types are supported. Default is a SimpleMarkerSymbol displaying a half circle. NOTE: This property is only used to switch between marker and line modes.
<Object> zoomOptions Optional Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in zoomOptions with 0 and 30 for the minSliderValue and maxSliderValue. The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30. Default value is null. See the zoomOptions table below for additional information.
Sample:
require(["esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/symbols/SimpleLineSymbol", "esri/dijit/SizeInfoSlider"], function (SimpleMarkerSymbol, Color, SimpleLineSymbol, SizeInfoSlider) {

  var mySymbol = new SimpleMarkerSymbol()
    .setColor(new Color([227,139,79,0.8]))
    .setOutline(new SimpleLineSymbol()
    .setColor(new Color([255,255,255]))
    .setWidth(0.5));
            
   sizeInfoSliderDiv = new SizeInfoSlider({
     symbol: mySymbol,
     statistics: {
     avg: 287.34912394549,
     count: 1541,
     max: 8215,
     min: 1,
     stddev: 573.17608985492
   },
   zoomOptions: {
     minSliderValue: 1,
     maxSliderValue: 1467,
   },
   sizeInfo: {
     minSize: 5,
     maxSize: 50,
     maxDataValue: 1188,
     minDataValue: 308
   }
 }, "sizeInfoSliderDiv");
 sizeInfoSliderDiv.startup();
}
Property Details

<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. See the object specifications table below for the structure of the returned histogram object.
Default value: null
Object Specifications:
<histogram>
<Object[]> bins Required An array of objects indicating bins in the histogram. It contains the number of features that fall into each of the disjoint categories in the histogram. The object includes the following properties:
  • count: Numeric value indicating the count in each bin.
  • maxValue: Numeric value indicating the maximum value for the specified bin.
  • minValue: Numeric value indicating the minimum value for the specified bin.
<Number> maxValue Required Maximum value captured by the histogram. This is optional if statistics are passed in.
<Number> minValue Required Minimum value captured by the histogram. This is optional if statistics are passed in.
<Number> normalizationTotal Optional Sum of all data values used to normalize data. Available only when normalizationType is percent-of-total.

<Number> histogramWidth

Optional: Width of the histogram in pixels.
Default value: 100

<Number> maxValue

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

<Number> minValue

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

<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: Represents the width of the SVG ramp in pixels.
Default value: 26

<Boolean> showHandles

Optional: Indicates whether to display slider 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 the slider labels.
Known values: true | false
Default value: true

<Boolean> showTicks

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

<Object> sizeInfo

Required: Defines the size of the symbol where feature size is proportional to data value. See Renderer.sizeInfo for additional information.
Default value: null

<Object> statistics

Optional: Represents the statistics data object. Use the renderer.statistics from smartMapping.createSizeRenderer response.
Default value: null
Sample:
smartStyling.createColorRenderer({
  layer: layer,
  field: "POP1999",
  basemap: "topo"
  }).then(function(response){
    var colorInfo = response.renderer.visualVariables[0];
    var bottomHandlerValue = colorInfo.stops[0].value;
    var topHandlerValue = colorInfo.stops[4].value;
    var stats = response.statistics;
});
Required: The SimpleLineSymbol or SimpleMarkerSymbol used with the widget. Note that only these two symbol types are supported. Default is a SimpleMarkerSymbol displaying a half circle. NOTE: This property is only used to switch between marker and line modes.
Default value: SimpleMarkerSymbol

<Number[]> values

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

<Object> zoomOptions

Optional: Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in zoomOptions with 0 and 30 for the minSliderValue and maxSliderValue. The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30. See the zoomOptions table below for additional information.
Default value: null
Object Specifications:
<zoomOptions>
<Object> histogram Required Histogram data object.
<Number> maxSliderValue Required Maximum value of slider. It represents the absolute maximum value when the slider is zoomed.
<Number> minSliderValue Required Minimum value of the slider. It represents the absolute minimum value when the slider is zoomed.
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 SizeInfoSlider 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:
<Number> maxValue The maxValue of the SizeInfoSlider.
<Number> minValue The minValue of the SizeInfoSlider.
<Object> sizeInfo The sizeInfo of the SizeInfoSlider object.

data-value-change

Fires when minValue or maxValue of the SizeInfoSlider changes.
Event Object Properties:
<Number> maxValue The maximum value allowed by the slider.
<Number> minValue The minimum value allowed by the slider.
<Object> sizeInfo Returns the sizeinfo of the SizeInfoSlider object.

handle-value-change

Fires on slide stop and when a handle is updated via textbox.
Event Object Properties:
<Object> sizeInfo Returns the sizeinfo of the SizeInfoSlider object.

zoomed

Fires when the zoom state changes. (Added at v3.15)
Event Object Properties:
<Boolean> zoomed Indicates whether the slider is currently in a zoomed state.
Show Modal