Facets layouts: Range slider

A Range Slider is an intuitive user interface to position a number within a range. A typical Range Slider usually can be used to filter results between two prices, or two dates.

WPSOLR uses the ion.rangeSlider javascript library to render the Range Slider control user interface. This library is very popular, and very flexible. As we will see, WPSOLR is able to accept all the ion.rangeSlider parameters, to customize your slider filters with tens of features.

The WPSOLR Range Slider can work both with numbers and dates. Both are described below in their own chapter.

1) Activate the Advanced Layout add-on

Range sliders are part of the Advanced Layout add-on (also name “Theme” add-on). You need to activate it, to be able to select and configure the Range Slider facets.

Theme add-on activation

2) Numbers Range Slider

a) Select the custom field(s) (like WooCommerce “_price”, or “rating”, or “_stock”, …), which contain numbers and are configured with type “Integer” or “Float” in screen 2.2

b) Save

c) Set a field label if necessary, and select the “Range Slider” layout. You can also translate your field label with WPML/Polylang string modules

d) Save

e) Select the Range Slider “Skin”. The skins are predefined css applied to the slider.

f) Set the ion.rangeSlider javascript options  to customize how your slider will look like (money prefix, decimal separators, grid ….). You can also translate your javascript options with WPML/Polylang string modules. For instance, to show a “$” prefix for language “en-US”, and “€” for language “fr-FR”.

For instance, to round decimals:
wpsolr_ion_range_slider_options = { grid: true, prefix: "€", prettify: function my_prettify (n) {
return Math.floor(n);
}};

g) Save

h) Add the “WPSOLR Facets” widget to your search

Ion.rangeSlider: configure number custom field

Here is how your search facets could look like, then:

Ion.rangeSlider: number filters

3) Dates Range Slider

Ion.rangeSlider: configure date filters with different locales

Ion.rangeSlider: results with date filters and different locales

displaydate_dt is the post type modification date. Let’s format it as a US formatted date:

wpsolr_ion_range_slider_options =
{
grid: true,
prettify: function tsToDate (ts) {
var lang = "en-US";
var d = new Date(ts); return d.toLocaleDateString(lang, { year: 'numeric', month: 'long', day: 'numeric' });
 } 
};

Ion.rangeSlider: date formatted with “us-US” locale

displaymodified_dt is the post type creation date. Let’s format it as a Japanese formatted date:

wpsolr_ion_range_slider_options =
{
grid: true,
prettify: function tsToDate (ts) {
var lang = "ja-JA";
var d = new Date(ts); return d.toLocaleDateString(lang, { year: 'numeric', month: 'long', day: 'numeric' });
 } 
};

Ion.rangeSlider: date formatted with Japanese “ja-JA” locale

wpsolr_date_custom_field is a custom field, configured in screen 2.2 with a date type. Let’s format it as a French formatted date:

Ion.rangeSlider: format a custom field as a date

wpsolr_ion_range_slider_options =
{
grid: true,
prettify: function tsToDate (ts) {
var lang = "fr-FR";
var d = new Date(ts); return d.toLocaleDateString(lang, { year: 'numeric', month: 'long', day: 'numeric' });
 } 
};

Ion.rangeSlider: date formatted with French “fr-FR” locale