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.

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

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

3) Dates Range Slider

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' });
 } 
};

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' });
 } 
};

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:

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' });
 } 
};