HistogramRangeSlider

This sample demonstrates how to create a HistogramRangeSlider widget and use it to filter a layer's features based on a numeric attribute. The histogram can be generated with the histogram() statistics function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
view.whenLayerView(layer).then((layerView) => {

  // temperature in Celsius
  const field = "temp";
  const min = 0;
  const max = 30;

  // generate 100-bin histogram
  histogram({
    layer: layer,
    field: field,
    numBins: 100,
    minValue: min,
    maxValue: max
  }).then((histogramResponse) => {

    // histogram response contains the histogram bins
    // the code block shown below will be placed here

  });
});

Then you can construct the slider using the output bins, and min/max values. You also must indicate a rangeType. This property serves two purposes:

  1. It determines how histogram bars are rendered, indicating which bins are included and excluded from the selected range.
  2. It determines the SQL where clause used for executing queries, highlighting, selecting, or filtering features.

In this case, the rangeType is between so two thumbs will render on the slider track and all values between the two thumbs will be included in the selection/query/filter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const slider = new HistogramRangeSlider({
  bins: histogramResponse.bins,
  min: min,
  max: max,
  values: [min, max],
  excludedBarColor: "#524e4e",
  rangeType: "between",
  container: document.getElementById("slider-container")
});

slider.on(["thumb-change", "thumb-drag", "segment-drag"], (event) => {
  layerView.filter = {
    // generates the where clause for filtering features
    where: slider.generateWhereClause(field)
  };
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close