Search: AI, Hybrid, Classic

  • WPSOLR PRO
  • Contact Us
  • Live Demos
  • Help
    • My Licenses
      • Login
      • Download
      • Why us
      • Contact us
    • Features
      • Google Retail Search
      • Weaviate
      • Elasticsearch
      • OpenSearch
      • Solr
      • Algolia
      • Roadmap
      • Artificial Intelligence
      • Hosting
      • Releases
    • Documentation
    • Support
    • Testimonials
    • Blog
Menu
  • WPSOLR PRO
  • Contact Us
  • Live Demos
  • Help
    • My Licenses
      • Login
      • Download
      • Why us
      • Contact us
    • Features
      • Google Retail Search
      • Weaviate
      • Elasticsearch
      • OpenSearch
      • Solr
      • Algolia
      • Roadmap
      • Artificial Intelligence
      • Hosting
      • Releases
    • Documentation
    • Support
    • Testimonials
    • Blog
Download WPSOLR FREE at wordpress.org >>
Search

Home » Your configuration journey, step by step » Add-ons » Theme add-on » Filters layouts » Range Slider Layout

Range Slider Layout

847 views 0 January 22, 2019 Updated on October 21, 2022

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

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
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?

Yes  No
Related Articles
  • Weaviate with Google PaLM API
  • Weaviate with Hybrid search
  • Weaviate with Question Answering transformers
  • Weaviate with Cohere Multilingual API
  • Weaviate with OpenAI GPT API
  • Weaviate with HuggingFace Endpoints API

Didn't find your answer? Contact Us

Previously
Colour Picker Layout
Up Next
Add Ajax to the current Theme
Expand All Collapse All
  • What is it WPSOLR ?
    • The standard WordPress SQL search
    • The WPSOLR search with Elasticsearch, Apache Solr, or Algolia
  • Your configuration journey, step by step
    • Install Apache Solr
    • Hosted Apache Solr and SolrCloud Services
    • Install Elasticsearch
    • Elasticsearch Hosting
    • Configure your indexes
      • Create a Google Retail search index
      • Create a Weaviate index
        • Weaviate with Google PaLM API
        • Weaviate with sentence transformers
        • Weaviate with CLIP text-to-image
        • Weaviate with HuggingFace Endpoints API
        • Weaviate with OpenAI GPT API
        • Weaviate with Cohere Multilingual API
        • Weaviate with Question Answering transformers
        • Weaviate with Hybrid search
      • Generate a test Apache Solr index
      • Generate a test Elasticsearch index
      • Create an Apache Solr index
      • Create a SearchStax SolrCloud index
      • Create an Elastic Elasticsearch index
      • Create an Amazon AWS OpenSearch index
      • Create an Algolia index
      • Create an Elasticsearch index
      • Create an Opensolr Solr index
      • Create a Qbox Elasticsearch index
      • Create an ElasticPress Elasticsearch index
      • Create an Aiven Elasticsearch or OpenSearch index
      • Create a Bonsai Elasticsearch index
      • Create an Amazon AWS Elasticsearch index
      • Create an ObjectRocket Elasticsearch index
      • Create a Cloudways Elasticsearch index
      • Create an Alibaba Cloud Elasticsearch index
      • Create a Compose Elasticsearch index
      • Connect to an Apache Solr index
      • Connect to an Elasticsearch index
    • Add-ons
      • bbPress add-on
      • YITH WooCommerce Ajax Search add-on
      • SEO add-ons
        • Yoast SEO add-on
        • All in One SEO add-on
      • Listable add-on
      • ACF add-on
      • Advanced Scoring add-on
      • Cron Scheduling add-on
      • Theme add-on
        • Filters layouts
          • Radiobox & Checkbox Layout
          • Numeric Range Layout
          • Colour Picker Layout
          • Range Slider Layout
        • Add Ajax to the current Theme
        • Collapse taxonomy hierarchies
        • Custom Facets CSS
      • WPML add-on
      • Premium add-on
        • Manage more than one Elasticsearch or Solr index
      • PDF Embedder add-on
      • Geolocation add-on
      • AI Natural Language APIs add-on
        • Amazon Comprehend
        • Google Natural Language
        • Aylien Text Analysis
        • MeaningCloud
        • Qwam Text Analytics
      • Toolset Types add-on
      • AI Image and OCR APIs add-on
        • Google Vision
        • Amazon Rekognition
      • Embed Any Document add-on
      • MyListing add-on
      • Polylang add-on
      • WooCommerce add-on
      • Cross-domain search add-on
      • Directory+ add-on
      • Toolset Views add-on
      • Listify add-on
      • Jobify add-on
      • Query Monitor add-on
  • Quick start
Login
Support
Privacy policy
  • Terms and Conditions
  • © 2020 wpsolr.com. All Rights Reserved.
Youtube
Roadmap