UI Params: Range Slider

This UI Element allows the user to select between a range of values.

What it looks like

How to use this UI Element

"inputType": "rangeSlider"`

Required Properties

Syntax	Type	Description	Example
bounds	[Array(2)]	The slider bounds, should be an array of numbers representing the year bounds for the slider	"bounds":[2001, 2016]
startParamName	string	This is the parameter name for the 'start' slider value. MapBuilder will pass a parameter to the Vega widget with this name and the value the user selects for the startParam from the UI Param selector.	"startParamName": "period"
combineParams	boolean	Set this to true if both slider bounds should be included in one param name. For most calls to the GFW API, both the slider bounds are included in one call to the API which is named period	"combineParams":true
endParamName (optional)	string	This is the parameter name for the 'end' slider value. MapBuilder will pass a parameter to the Vega widget with this name and the value the user selects for the endParam from the UI Param selector. (not required if "combineParams" is set to true)	"endParamName": "period"
valueSeparator (optional)	string	The character that should separate the slider bounds if using "combineParams". Ex: "valueSeparator": "," would create a query param that looks like period=2001,2008. In this example, the startParnamName is called "period" and the user has selected 2001 as the start bound and 2008 as the end bound	"valueSeparator": ","
step (optional)	number	The distance between slider values. If not specified the default is 1	"step":1
valueType (optional)	number	(currently this only supports "date") Use this property if your slider values are four digit year values (2001) AND your api expects a date. This will convert the slider values to dates that include the full years: Ex Start Value of 2001 is converted to: 2001-01-01 Ex End Value of 2008 is converted to: 2008-12-31 .Most tree cover loss analysis used in the GFW API expect the period values to be a date. Thus, it is necessary to include this parameter.	"valueType": "date"

Example:

The example below shows a sample uiParams rangeSlider configuration for GFW Tree Cover Loss Analysis. In this example:

• The API will pass a parameter called period to the vega used in MapBuilder since the "startParamName": is set to "period",
• The user will be able select a date range for the parameter which ranges from 2001 to 2018 since bounds are set to "bounds": [2001,2018]
• The date ranges are combined into one parameter separated by a comma (i.e:period=2001-01-01,2018-12-31) since "valueSeparator": is set to ",". The year values are also converted to dates (2001-01-01) since "valueType": is set to "date".

{
				"inputType": "rangeSlider",
				"startParamName": "period",
				"combineParams": true,
				"valueSeparator": ",",
				"bounds": [2001,
				2018],
				"valueType": "date",
				"label": {
					"en": "Select range for analysis",
					"fr": "Sélectionner une plage pour l’analyse:",
					"es": "Seleccione un rango para el análisis:",
					"pt": "Selecione o período para análise:",
					"id": "Pilih rentang untuk analisis:",
					"zh": "选择分析范围:",
					"ka": "საზღვრების შერჩევა ანალიზისთვის:"
				}
			}