Range Slider Layout

248 views January 22, 2019 July 13, 2019 admin 0

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

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”.

g) Save

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

 

Ion.rangeSlider: configure number custom field

Ion.rangeSlider: configure number custom field

 

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

Ion.rangeSlider: number filters

Ion.rangeSlider: number filters

 

3) Dates Range Slider

Ion.rangeSlider: configure date filters with different locales

Ion.rangeSlider: configure date filters with different locales

 

Ion.rangeSlider: results with date filters and 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

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

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

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

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

 

 

 

Was this helpful?

Join Our weekly Newsletter

Receive our latest news once a week, each Thursday afternoon.
Your email is kept 100% private, and you will not receive other stuff in your mailbox.

We keep your data private and share your data only with third parties that make this service possible. Read our Privacy Policy.