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

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

Description

(Added at v3.13)
A widget to assist with managing a renderer for visualizing features based upon colors.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/RendererSlider
|_esri/dijit/ColorInfoSlider

Constructors

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

CSS

esri/dijit/ColorInfoSlider | Download source

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

Properties

NameTypeSummary
colorInfoObjectRequired: The data map containing renderer information.
handlesNumber[]Required: Handles identified by their index values within the stops array.
histogramObjectOptional: Represents the histogram data object.
histogramWidthNumberOptional: Width of 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: 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 handles.
showRatioLabelsBoolean | StringIndicates whether to display percentage labels.
showTicksBooleanOptional: Indicates whether to display ticks marks.
showTransparentBackgroundBooleanOptional: Indicates whether to display a transparent background.
statisticsObjectOptional: Represents a statistics data object.
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
change
{
  colorInfo: <Object>
}
Fires when ColorInfoSlider changes.
data-value-change
{
  colorInfo: <Object>,
  maxValue: <Number>,
  minValue: <Number>
}
Fires when minValue or maxValue of the ColorInfoSlider changes.
handle-value-change
{
  colorInfo: <Object>
}
Fires when a ColorInfoSlider 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.
zoomed
{
  zoomed: <Boolean>
}
Fires when the zoom state changes.
Constructor Details

new ColorInfoSlider(params, srcNodeRef)

Creates a new ColorInfoSlider widget within the provided DOM node srcNodeRef.
Parameters:
<Object> params Required Set of parameters used to specify the ColorInfoSlider widget options.
<Node | String> srcNodeRef Required Reference or ID of the HTMLElement where the widget should be rendered.
params properties:
<Object> colorInfo Required The data map containing renderer information. See Renderer.colorInfo for additional information.
<Number[]> handles Required Handles identified by their index values within the stops array.
<Object> histogram Optional 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.
<Number> histogramWidth Optional Width of histogram in pixels. Default value is 100.
<Number> maxValue Optional The absolute maximum value of the slider. NOTE: This value overrides the statistics max property.
<Number> minValue Optional The absolute minimum value of the slider. NOTE: This value overrides the statistics min property.
<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 widget ramp in pixels. Default value is 26.
<Boolean> showHandles Optional Displays handles when set to true. Default is true.
<Boolean> showHistogram Optional Displays the histogram when true.
<Boolean> showLabels Optional Displays labels when set to true. Default is true.
<Boolean | String> showRatioLabels Optional Indicates whether to display percentage labels. This can be either null|false, "percent", or "percentTotal".
<Boolean> showTicks Optional Displays tick marks when set to true. Default is true.
<Boolean> showTransparentBackground Optional Displays transparent background when set to true. Default is false.
<Object> statistics Optional Represents a statistics data object. Access this from the FeatureLayerStatistics.getFieldStatistics response.
<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.
Sample:
require(["esri/layers/FeatureLayer", "esri/dijit/ColorInfoSlider", "esri/plugins/FeatureLayerStatistics"], function (FeatureLayer, ColorInfoSlider) {

  var layer1 = new FeatureLayer("//server.arcgisonline.com/arcgis/rest/services/Demographics/USA_Median_Household_Income/MapServer/3", {
    outFields: ["MEDHINC_CY"]
  });

  layer1.on("load", function () {
    layer1.addPlugin("esri/plugins/FeatureLayerStatistics").then(function (){
      layer1.statisticsPlugin.getHistogram({
        field: "MEDHINC_CY",
        numBins: 10
      }).then(function (histogram) {

        slider1 = new ColorInfoSlider({
          "statistics": {
            avg: 28.4
          },
          "colorInfo": {
            "field": "MEDHINC_CY",
            "normalizationField": "",
            "stops": [
              {value: 10, color: "#fffcd4"},
              {value: 20, color: "#e0b2c1"},
              {value: 25, color: "#c168ad"},
              {value: 50, color: "#763578"},
              {value: 70, color: "#350242"}
            ]
          },
          "minValue": 0,
          "maxValue": 80,
          "histogram": histogram,
          "handles": [0, 4],
          "showLabels": true,
          "showTicks": true
        }, "colorInfoSliderDiv");
        colorInfoSliderDiv.startup();

      }).otherwise(function (error) {
          console.log("Histogram failed to load: ", error);

        }); // end otherwise
    }); // end addPlugin
  }); // end layer load
}
Property Details

<Object> colorInfo

Required: The data map containing renderer information. See Renderer.colorInfo for additional information.
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. 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 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: 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 handles.
Known values: true | false
Default value: true

<Boolean | String> showRatioLabels

Indicates whether to display percentage labels. This can be either null|false, "percent", or "percentTotal".
  • Percent uses a formula to calculate the percentage values from the data values. This results in 50%, 100%, 200%.
    val * 100 = percentVal
    
  • PercentTotal uses a formula to calculate the percentage values from the data values. This results in 33%, 50%, 66%. Because the value are always between 0 and 100%, this should indicate the extreme min/max values on the slider.
    (val / (1 + val) ) * 100 = percentVal
    
(Added at v3.15)
Default value: false
Sample:
slider = new ColorInfoSlider({
  "showRatioLabels": "percent",
  "colorInfo": {
    "stops": [
    {value: 0.5, color: "#FFEE99", label: "< .5"},
    {value: 1, color: "#999166", label: "1"},
    {value: 2, color: "#333333", label: "> 2"}]},
  handles:[0,1,2],
  statistics:{
    avg: 1.16667,
    count: 3,
    max: 2,
    min: 0.5
  }
}, "sliderDiv");
slider.startup();

<Boolean> showTicks

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

<Boolean> showTransparentBackground

Optional: Indicates whether to display a transparent background.
Known values: true | false
Default value: false

<Object> statistics

Optional: Represents a statistics data object. Access this from the FeatureLayerStatistics.getFieldStatistics response.
Default value: null

<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.
<Number> minSliderValue Required Minimum value of the slider.
Method Details

startup()

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

change

Fires when ColorInfoSlider changes.
Event Object Properties:
<Object> colorInfo Returns the colorInfo of the ColorInfoSlider object.

data-value-change

Fires when minValue or maxValue of the ColorInfoSlider changes.
Event Object Properties:
<Object> colorInfo The colorInfo of the ColorInfoSlider object.
<Number> maxValue Contains current maxValue of ColorInfoSlider.
<Number> minValue Contains current minValue of ColorInfoSlider.

handle-value-change

Fires when a ColorInfoSlider handle is moved.
Event Object Properties:
<Object> colorInfo The colorInfo of the ColorInfoSlider 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.

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.