Click the image below to open an app that showcases the behavior and UI of each of these widgets.
The following list contains links to the documentation for each of these widgets. Each reference page contains a brief description, a reference image with annotations, and code snippets demonstrating how to work with the widgets.
The remainder of this post will explore how to work with the Slider, Histogram, and HistogramRangeSlider widgets.
You may have noticed that 10 of these widgets are sliders. The most basic and potentially most widely-used of these is esri/widgets/Slider. In fact, all other sliders are built on top of the Slider widget view with their own view models.
The Slider API is designed to get you started with a simple slider that can easily be configured for a variety of applications. The API allows you to toggle the visibility of min/max values, toggle between a horizontal or vertical layout, format labels, configure ticks, steps, and customize the style and behavior of the widget’s elements.
The sections below contain several CodePens to encourage you to experiment with the various ways you can configure the Slider widget.
Create a basic slider
To add a simple slider with a single thumb to your app, set the
max values, and the
value of the thumb.
Multiple thumbs and ticks
Include more values to the
values array to add additional thumbs to the slider. Notice you can drag the segments between thumbs by clicking the track and dragging. The tickConfigs property allows you to control rendering of ticks on the slider.
Customize tick styles and behavior
You can customize the CSS of the ticks by adding classes to the tick and label elements in the tickCreatedFunction. I also added an event listener to the ticks representing whole numbers. Click one in the app below to snap the thumb to the clicked value.
You can also set step values with either a single value, which is used to determine the interval for each step, or an array of values, which determine exact positions on the track for snapping thumbs.
The labelFormatFunction property allows you to customize the labels of slider values without altering the values themselves.
The Histogram widget provides a simple UI for displaying data in a histogram. This API allows you to specify an array of bins, each with a minimum and maximum bound along with a count. You can also add an average line or any other data line to indicate meaningful values in the dataset.
The HistogramRangeSlider combines the Histogram widget with the Slider into a cohesive widget. This widget was specifically designed for filtering applications. It includes a rangeType property for determining how the histogram renders as the user slides the thumbs. The
rangeType also tells the generateWhereClause method how it should construct the SQL where clause for filtering features in the view.
The HistogramRangeSlider sample in the JS API documentation demonstrates how to use the slider for filtering features in a FeatureLayer. Click the image below to explore this sample in more detail.
The following samples in the JS API documentation demonstrate how to use these widgets in various scenarios.
- Histogram widget
- Update a renderer’s attribute
- Generate continuous color visualization
- Generate data-driven continuous size visualization
- Customize ColorSlider Histogram
I encourage you to try out these widgets in your own apps! Don’t hesitate to reach out and provide feedback.