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

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

Description

(Added at v3.13)
A widget to assist in obtaining values for managing and setting properties on a HeatmapRenderer.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/RendererSlider
|_esri/dijit/HeatmapSlider

Constructors

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

CSS

esri/dijit/HeatmapSlider | Download source

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

Properties

NameTypeSummary
colorStopsObjectRequired.
handlesNumber[]Required.
maxValueNumberOptional, absolute maximum value of the slider.NOTE: This value overrides statistics' max property.
minValueNumberOptional, absolute minimum value of the slider.NOTE: This value overrides statistics' min property.
rampWidthNumberOptional.
showHandlesBooleanProperty for showing handles.
showLabelsBooleanProperty for showing labels.
showTicksBooleanProperty for showing ticks.
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
{
  colorStops: <Object>
}
Fires when HeatmapSlider changes.
handle-value-change
{
  colorStops: <Object>
}
Fires when HeatmapSlider 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 HeatmapSlider(params, srcNodeRef)

Creates a new HeatmapSlider widget within the provided DOM node srcNodeRef.
Parameters:
<Object> params Required Set of parameters used to specify the HeatmapSlider widget options.
<Node | String> srcNodeRef Required Reference or ID of the HTMLElement where the widget should be rendered.
params properties:
<Object[]> colorStops Required An array of colorStop objects describing the renderer's color ramp with more specificity than just colors.
<Number[]> handles Required Handles identified by their index values within the stops array.
<Number> maxValue Optional Absolute maximum value of the slider. Default is 100.
<Number> minValue Optional Absolute minimum value of the slider. Default is 0.
<Number> rampWidth Optional Width of slider ramp in pixels. Default is 25.
<Boolean> showHandles Optional Displays slider handles when true. Default is true.
<Boolean> showLabels Optional Displays slider labels when true. Default is true.
<Boolean> showTicks Optional Displays slider ticks when true. Default is true.
Sample:
require(["esri/dijit/HeatmapSlider"], function (HeatmapSlider) {

  var myStops = [
    {"ratio":0,"color":{
      "r":133,"g":193,"b":200,"a":0}
    },
    {"ratio":0.01,"color":{
      "r":133,"g":193,"b":200,"a":0}
    },
    {"ratio":0.01,"color":{
      "r":133,"g":193,"b":200,"a":0.7}
    },
    {"ratio":0.01,"color":{
      "r":133,"g":193,"b":200,"a":0.7}
    },
    {"ratio":0.0925,"color":{
      "r":144,"g":161,"b":190,"a":0.7}
    }, 
    {"ratio":0.17500000000000002,"color":{
      "r":156,"g":129,"b":132,"a":0.7}
    },
    {"ratio":0.2575,"color":{
      "r":167,"g":97,"b":170,"a":0.7}
    },
    {"ratio":0.34,"color":{
      "r":175,"g":73,"b":128,"a":0.7}
    },
    {"ratio":0.42250000000000004,"color":{
      "r":184,"g":48,"b":85,"a":0.7}
    },
    {"ratio":0.505,"color":{
      "r":192,"g":24,"b":42,"a":0.7}
    },
    {"ratio":0.5875,"color":{
      "r":200,"g":0,"b":0,"a":0.7}
    },
    {"ratio":0.67,"color":{
      "r":211,"g":51,"b":0,"a":0.7}
    },
    {"ratio":0.7525000000000001,"color":{
      "r":222,"g":102,"b":0,"a":0.7}
    },
    {"ratio":0.8350000000000001,"color":{
      "r":233,"g":153,"b":0,"a":0.7}
    },
    {"ratio":0.9175000000000001,"color":{
      "r":244,"g":204,"b":0,"a":0.7}
    },
    {"ratio":1,"color":{
      "r":255,"g":255,"b":0,"a":0.7}
    }
  ];

  heatmapSliderDev = new HeatmapSlider({
    "colorStops": myStops
  }, "heatmapSliderDev");
          
  heatmapSliderDev.startup();
}
Property Details

<Object> colorStops

Required.
Default value: null

<Number[]> handles

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

<Number> maxValue

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

<Number> minValue

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

<Number> rampWidth

Optional
Default value: 25

<Boolean> showHandles

Property for showing handles.
Known values: true | false
Default value: true

<Boolean> showLabels

Property for showing labels.
Known values: true | false
Default value: true

<Boolean> showTicks

Property for showing ticks.
Known values: true | false
Default value: true

<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 HeatmapSlider changes.
Event Object Properties:
<Object> colorStops An array of colorStop objects describing the renderer's color ramp with more specificity than just colors.

handle-value-change

Fires when HeatmapSlider handle is moved.
Event Object Properties:
<Object> colorStops An array of colorStop objects describing the renderer's color ramp with more specificity than just colors.

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.