ContributorsLast modified on: Feb 10, 2017


Image to be displayed

A GeoDistanceDropdown sensor component creates a location search based proximity slider UI widget. It is used for distance based filtering.

Example uses:

  • finding restaurants in walking distance from your location.
  • discovering things to do near a landmark.


  title="Geo Distance Dropdown"
      { "start": 0, "end": 20, "label": "< 20 miles" },
      { "start": 0, "end": 50, "label": "< 50 miles" },
      { "start": 0, "end": 100, "label": "< 100 miles" },
  defaultSelected="< 20 miles"
  placeholder="Select a distance range.."


  • componentId String
    unique id of the sensor, can be referenced in an actuator’s actuate prop.
  • appbaseField String
    DB data field to be mapped with the component’s UI view, used when a database query is made on this field.
  • title String [optional]
    title of the component to be shown in the UI.
  • unit String [optional]
    unit for distance measurement, uses mi (for miles) by default. Distance units can be specified from the following:
  • data Object Array
    collection of UI labels with associated start and end range values.
  • defaultSelected String [optional]
    pre-select a label from the data array.
  • placeholder String [optional]
    set the placeholder to show for the dropdown UI, useful when no option is defaultSelected.

CSS Styles

All reactivebase and reactivemaps components are rbc namespaced.

Annotated image

<div class="rbc rbc-geodistanceslider rbc-title-active rbc-placeholder-active rbc-labels-inactive">
    <div class="row">
        <h4 class="rbc-title">Geo Distance Search</h4>
        <div class="rbc-search-container col s12 col-xs-12">
            <div class="Select">
    <div class="col s12 col-xs-12">
      <div class="Select">


  1. GeoDistance dropdown with all the default props

  2. GeoDistance dropdown with a title

  3. GeoDistance dropdown with a defaultSelected value

  4. Playground (with all knob actions)