Search API Ranges gives search facets the ability to add a slider widget for numeric fields. In this video, we will add a slider facet that will allow us to narrow our search based on the price field.

Install Module

Enable Module

  • Go to "Modules" (admin/modules) and enable:
    • Search ranges
  • (Save Configuration)

After we have installed and enabled the Search API Ranges module, we need to enable the price facet and render the facet using a Min/Max UI Slider provided by the module.

Before we set it up, I'm going to create more items using Devel Generate.

  • Go to "Configuration = > Search and Metadata => Search API (/admin/config/search/search_api)
  • Node index
    • Click the dropdown arrow
    • Choose "Fields"
    • [x] Price
  • (Save changes)
  • Click "facets" tab
  • [x] Price
  • (Save Configuration)
    • Click "configure display" link
      • Display widget: Ranges: Min/Max UI Slider
  • (Save and go back to realm settings)

Index node

  • Click "View" tab
  • (Index now)

Next, lets display the block in the second sidebar along with the other facets.

Enable facet blocks

  • Go to "Structure => Blocks" (admin/structure/block)
  • Scroll down to Disabled
    • Block: Facet API: Search service: Node index : Price
    • Region: Choose "Sidebar second"
  • (Save blocks)

Now when we go to our home page and perform a search, we'll see that in the second sidebar of the results page, we now have the "Filter by Price" facet with a range slider.