Overview

Slider facet typeAllow users to visually narrow results between two number ranges.

Available options

Name Description
Data source Where the value lives (taxonomy, custom field, post attribute). If you also set an “Other data source”, this value will be used for the lower limit
Other data source Use this setting if you want to use a separate value for the upper limit
Compare type This setting is only visible and relevant when the Other data source setting is in use. It determines how the range of the post’s two data source values is compared to the user-selected range. Note that for all compare types, <= and >= comparisons are used:

  • Basic – the post’s range is inside the user-selected range:
    Slider facet compare type Basic
  • Enclose – the post’s range surrounds the user-selected range:
    Slider facet compare type Enclose
  • Intersect – the post’s range intersects at least partially with the the user-selected range:
    Slider facet compare type Intersect
Prefix The text that appears before each slider value, for example a currency sign
Suffix The text that appears after each slider value, for example “m2”
Reset text The text of the Reset button. Default: “Reset”
Format The number format
Step The amount of increase between intervals (default = 1)

Value storage and emtpy post range values

If a Slider facet uses two data sources, the lower value is stored as facet_value, and the upper value is stored as facet_display_value in the index table.

There are a few things to keep in mind in this situation:

  • If a post has no value set for the first (main) data source field, the post will not be indexed, so it will never appear in the results. The same is true for posts that do not yet have this field set in the database because they have not been saved after adding the custom field in (for example) Advanced Custom Fields.
  • If a post has no value set for the second data source field, or if that field has not yet been saved for the first time, the post will be indexed but the value for the post’s range upper limit will then be set to 0. This may lead to unexpected or illogical results, depending on the “Compare type” you have set for the facet.

To prevent the above situations, make sure that if you use two data source fields, all posts actually have two values set.

Customizing the slider

FacetWP uses a JavaScript library called noUiSlider. The available slider options can be changed with the facetwp/set_options/slider hook.

The code below shows three examples:

  • Add tooltips to the handles of a specific slider facet.
  • Change the number of decimals in the tooltip handles of a specific slider facet.
  • Add a scale/pips along the slider of a specific slider facet. For the available range options see the documentation. Note that FacetWP only supports sliders with two handles.

This image shows an example of handle tooltips and a scale/pips:

FacetWP slider tooltips and scale / pips

add_action( 'wp_head', function() {
  ?>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        if ('undefined' !== typeof FWP && 'undefined' !== typeof FWP.hooks) {
          if ('undefined' !== typeof FWP) {
            FWP.hooks.addFilter('facetwp/set_options/slider', function(opts, facet) {

              // Example 1: Add tooltips to handles of a slider facet with the name 'price_slider'
              if (facet.facet_name == 'price_slider') { // Change 'price_slider' to your slider facet's name
                
                // Option 1a: Set tooltip to 'true' for handle one and handle two:
                opts.tooltips = [true, true]

                // Option 1b: Give both tooltips a format. In this case the 'suffix' from the facet's settings:
                var suffix = ' ' + FWP.settings[facet.facet_name]['suffix']; // adds a space + the suffix, e.g. m2
                opts.tooltips = {
                  to: function(value) {
                    return value + suffix;
                  },
                  from: function(value) {
                    return value;
                  }
                };
              }

              // Example 2: Set 3 decimals for tooltip handle values of a slider facet with the name 'price_slider'
              if (facet.facet_name == 'price_slider') { // Change 'price_slider' to your slider facet's name
                opts.format = {
                  to: function(value) {
                    return nummy(value).format('0.000');
                  },
                  from: function(value) {
                    return value;
                  }
                };
              }

              // Example 2 + 3 combined: if you need  formatting of the tooltips (like example 1b) AND decimals (like example 2), be aware that tooltip formatting is only used in the tooltip handles and not in the values in the url, so you nee both:
              var suffix = ' ' + FWP.settings[facet.facet_name]['suffix']; // adds a space + the suffix, e.g. m2
              if (facet.facet_name == 'price_slider') { // Change 'price_slider' to your slider facet's name
                opts.tooltips = {
                  to: function(value) {
                    return nummy(value).format('0.0000') + suffix;
                  },
                  from: function(value) {
                    return value;
                  }
                };
                opts.format = {
                  to: function(value) {
                    return nummy(value).format('0.0000');
                  },
                  from: function(value) {
                    return value;
                  }
                };
              }

              // Example 3:  Add a scale / 'pips' to a slider facet with the name 'surface_area_slider'
              if (facet.facet_name == 'surface_area_slider') { // Change 'surface_area_slider' to your slider facet's name

                // Option 1:
                // Set FIXED ranges, choose 'min' and 'max' according to your lowest and highest possible value

                var surface_area_slider_range_static = {
                  'min': 0,
                  '25%': 80,
                  '50%': 160,
                  '75%': 240,
                  'max': 320
                };
                opts.range = surface_area_slider_range_static;

                // End Option 1

                // Option 2: 
                // Set DYNAMIC ranges, based on the slider's dynamic minimum and maximum values, which change when facets are interacted with.
                // This example calculates 3 pips in between min and max values.

                var min = FWP.settings['surface_area_slider'].range.min;
                var max = FWP.settings['surface_area_slider'].range.max;
                var half = (min + max) / 2;
                var quarter = (min + max) / 4;
                var threequarter = quarter * 3;

                var surface_area_slider_range_dynamic = {
                  'min': min,
                  '25%': quarter,
                  '50%': half,
                  '75%': threequarter,
                  'max': max
                };
                opts.range = surface_area_slider_range_dynamic;

                // End Option 2

                // Set the pips options
                opts.pips = {
                  mode: 'range',
                  density: 3
                }
              }

              return opts;
            });
          }
        }
      });
    </script>
  <?php
}, 100 );

See also