Numeric Range Slider for VirtueMart Products

The problem it solves

Custom Filters PRO offers a range slider for price out of the box. For other numeric fields — product dimensions, material weight, sheet thickness, anything measured in a unit — you get a checkbox list. If your field has sixty discrete values, you get sixty checkboxes. Visitors have no intuitive way to say "I need something between 600 and 1400 mm." This module adds exactly that.

How it works

The module reads the available discrete values for each field directly from the VirtueMart database. It renders a slider (one handle for a single value, two handles for a range) and passes the selected value or values to CF Pro in the format CF Pro expects — hex-encoded, enumerated, OR-joined within the field and AND-joined across fields. From CF Pro's point of view the slider behaves identically to a set of checkboxes: no schema changes, no CF Pro configuration changes, full compatibility with every CF Pro feature including its own AJAX engine.

As the visitor moves a handle, the available positions on every other slider narrow down in real time. If you filter by width, the length slider shows only the lengths that actually exist among products with that width. This dependent filtering happens through database JOINs on the fly, so the available options are always accurate.

Compact URL mode

A two-handle range filter across sixty discrete values would normally put sixty hex-encoded parameters in the URL. On large catalogues this can exceed Apache's LimitRequestLine or PHP's max_input_vars. Compact URL mode solves this permanently.

With compact mode enabled, the slider emits a single short parameter — cfrange_3=600:1400 — regardless of how many values fall within that range. A companion system plugin (plg_system_cfrange, included) intercepts this parameter before CF Pro reads the request, queries the database for all values of that field between 600 and 1400, and injects the full expanded array into Joomla's input object. CF Pro receives exactly what it would have received from sixty checkboxes, but the URL stays clean, short, and bookmarkable.

AJAX support

The module integrates with CF Pro's native AJAX engine rather than running a parallel one. When CF Pro is in AJAX mode, a slider change calls customFilters.listen() — the same internal call CF Pro makes when a checkbox is clicked. CF Pro then updates the product list, refreshes its own filter module with the narrowed options, updates the breadcrumb tags, and dispatches its own CfResultsUpdate event. The slider listens to that event and updates its own available value sets to stay in sync.

This two-way integration means the slider and the CF Pro checkboxes remain consistent at all times. Checking a CF Pro checkbox narrows the slider. Moving the slider narrows the checkboxes. Neither ever shows a stale state.

For site-level scripts that add unit labels, initialize third-party widgets, or manage open/closed panels, the module dispatches a unified cfslider:updated event on the document after every update — whether that update originated from the slider or from CF Pro. One event listener handles both sources.

Breadcrumb tags

The CF Pro breadcrumb module normally emits one removable tag per selected value. A range of forty values means forty tags. The included breadcrumb template override collapses these into one readable label: Length: 600 – 1400 mm. Clicking the tag removes the filter for that field only, leaving every other active filter exactly as it was.

The override reads the current selection from CF Pro's own input layer rather than from the filtered list that the breadcrumb module builds internally — so the tags remain correct after AJAX updates, after dependent filtering narrows the options, and in compact URL mode.

Per-instance colour theming

Four colour pickers in the module settings control the accent colour (handle, active range bar, highlighted labels), the track background, and the value bubble background and text. The hover shade for the accent colour is derived automatically so you only need to set one colour, not two. Because the colours are injected as inline CSS variables on each module wrapper, two instances of the module on the same page can have completely different colour schemes.

Optional Filter button

By default the product list refreshes every time a handle is released. An optional Filter button mode collects all sliders' positions and applies them in a single navigation — useful when visitors want to set several dimensions before triggering a search, or on connections where every round-trip is noticeable.

What's included

modcfslider — the module itself. Install on the module position visible alongside your CF Pro filtering module on the shop result page.
plgsystemcfrange — the companion system plugin for compact URL mode. Install and enable it when you turn on Compact range URL in the module settings. Required for large catalogues; harmless to install regardless.
CF Breadcrumb template override — a single PHP file to place in your active template's html/mod_cf_breadcrumbs/ folder. Merges range value tags into one clean label per field.

Key Features

• Range and single mode - configure each field independently; range gives two handles, single gives one
• Dependent filtering - available positions on each slider narrow as other filters are applied
• CF Pro AJAX integration - delegates to customFilters.listen(), the same call CF Pro uses internally
• Compact URL mode - short cfrange_X=min:max parameter, server-side expansion by companion plugin
• Optional Filter button - apply all sliders at once instead of refreshing on every handle release
• Per-instance colour theming - four colour pickers, hover shade auto-derived, CSS variable–based
• URL length guard - configurable safety limit prevents server errors from oversized requests
• Value set cache - optional caching of the available-values query with configurable lifetime
• Preserved elements - nominated CSS selectors survive AJAX content swaps intact (state + event handlers)
• Readable breadcrumb tags - range values collapsed to one tag per field, correct clear-URL
• Unified post-update event - cfslider:updated fires after every update regardless of source
• Grid and stack layout - sliders side by side or stacked; configurable minimum column width
• Multilingual - full Hungarian and English admin interface; all frontend labels translatable
• No extra JavaScript library - plain ES6, no jQuery, no framework
• Joomla 4 and 5 - namespaced plugin, legacy-structure module, both fully compatible
• GNU GPL v2+ - open source