Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
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.
view.whenLayerView(layer).then(function(layerView) {
const field = "temp";
const min = 0;
const max = 30;
histogram({
layer: layer,
field: field,
numBins: 100,
minValue: min,
maxValue: max
}).then(function(histogramResponse) {
});
});
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:
- It determines how histogram bars are rendered, indicating which bins are included and excluded from the selected range.
- 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.
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"], function(event) {
filterByHistogramRange(field);
});
const filterByHistogramRange = promiseUtils.debounce(function (field) {
layerView.filter = {
where: slider.generateWhereClause(field)
};
});
