HUSKY - WooCommerce Product Filter Professional

WooCommerce Range Slider Filter for Attributes and Meta Fields

Size, power, length, screen diagonal, year, mileage: numeric product data asks for a range slider rather than a long list of checkboxes. A WooCommerce range slider filter for attributes is easy to switch on in HUSKY, and it is just as easy to end up with a slider that shows 100000 before 9000, splits 1,9 into two values or always runs from 0 to 100. The reason is almost always the same: there are two different sliders, and they treat numbers differently. This guide explains both, the setup of each, and the fixes for wrong order, decimals and empty ranges.

Two range sliders: attribute values or a numeric meta field

HUSKY can draw a range slider from two kinds of data, and the choice decides what the slider can do.

Attribute (taxonomy) sliderMeta field slider
DataTerms of a global attribute or another product taxonomyA number stored in product meta: _length, _weight, an ACF number field, any custom field
What a range meansAll terms between the two handles, in the order the terms are listedA real numeric comparison: value between from and to
Slider positionsOne stop per existing term, evenly spacedAny value between min and max, with your step
Min and maxFirst and last termSet by hand in the Range option
From/to number boxesNoYes, Show inputs
Text scales (Soft, Medium, Hard)YesNo, numbers only
Variable productsFound by the attribute terms of the productOnly the product's own meta is searched, not its variations

The key difference: attribute terms are text. WordPress stores 9000 and 100000 as names, not numbers, so the attribute slider can only walk along a list of terms in a given order. It never calculates. The meta field slider compares numbers in the database, so it handles any value in a range, including values that no other product has.

Custom product attributes typed directly on a product's Attributes tab, without a global attribute behind them, are not taxonomies, and no filter type can use them. Create a global attribute under Products → Attributes first (see managing product taxonomies in the WooCommerce docs).

Set up a range slider filter for attributes

  1. Create the global attribute, for example Power, and add its values as terms: 5, 7.5, 10, 15. Assign them to products as usual.
  2. Open WooCommerce → Settings → Products Filter → Structure and set the type of that attribute to Slider. The Slider extension adds this type.
  3. Click the additional options (gear) button next to the attribute and set the slider options:
    • Type: double for a from-to range; single for one handle that selects everything from the first value up to the handle ("up to 10 kW").
    • Grid step: which labels under the slider are visible. 1 shows all, 2 every second one, -1 hides the labels between the ends. Useful when long values overlap.
    • Enable dynamic recount: drops values without products in the current results (see below).
    • Slider skin: the design of this slider.
  4. Keep Logic of filtering at OR. The slider sends every term of the chosen stretch, for example pa_power=5,7-5,10, and a product needs only one of them. With AND a product would need all of them, and nothing is found.

Because a range is "the terms between the handles", the order of the terms is the whole logic of the slider. If 6.5 sits after 8.2 in the list, a range from 6 to 7 skips it. The next section fixes the order.

Attribute slider values in the wrong order

Typical symptoms: 100000 comes before 9000, 10 and 11 come before 2, negative values run -1, -2, -3, 0, 1, or the handles jump back and forth while dragging. All of them are text sorting. The fix is to give the terms a numeric order.

Best: let WooCommerce sort the attribute numerically

Go to Products → Attributes, edit the attribute and set Default sort order to Name (numeric). WooCommerce then orders the terms by the numeric value of their names, which handles decimals written with a dot, negative numbers and names that start with a number, such as 10 cm. In the slider's additional options leave Sort terms at Default so HUSKY keeps that order. If Cache terms is on (Advanced → Options), press clear terms cache afterwards.

For a text scale, choose Custom ordering instead and drag the terms into place on the attribute's Configure terms screen: Soft, Medium, Medium-hard, Hard. The same drag and drop works for any numeric list whose order you want to control by hand.

HUSKY's own Sort terms options

The Sort terms option in the slider's additional options overrides the default order:

  • Title uses natural sorting of names: correct for whole positive numbers (2 before 10) and for names like 10 cm, but not for decimals or negative numbers.
  • Numeric. compares the whole-number value of the term slug. It works for whole positive numbers only: the slug of 6.5 is 6-5, which counts as 6, and WordPress removes the leading minus when it creates a slug, so -3 is sorted as 3.

Code: numeric order for any taxonomy slider

For a custom taxonomy, where WooCommerce's Name (numeric) is not available, sort the slider values in code. The woof_sort_terms_before_out filter receives the terms of each filter and the filter type:

/**
 * HUSKY: order the values of every taxonomy range slider by their number
 * (decimals with a dot and negative numbers included).
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_sort_terms_before_out', function ( $terms, $type ) {
    if ( 'slider' === $type && is_array( $terms ) ) {
        uasort( $terms, function ( $a, $b ) {
            return (float) $a['name'] <=> (float) $b['name'];
        } );
    }
    return $terms;
}, 20, 2 );

Terms without a leading number (a text scale) all count as 0 here and keep their existing order, so the snippet does not disturb such sliders.

Decimals, commas and uneven steps in attribute sliders

  • Write decimals with a dot. The slider receives its labels as one comma-separated list, so a term named 1,9 becomes two labels, 1 and 9, and every position after it points to the wrong term. Rename such terms to 1.9. This has nothing to do with the store's decimal separator setting: term names are plain text.
  • Positions are evenly spaced per term, not per value. Terms 1, 2, 5 and 50 get four equal steps. If the slider should look proportional, add the missing intermediate values as terms.
  • A slider needs at least two values. With only two terms the handles can only sit on the two ends. With fewer than two values left after dynamic recount, the slider is not shown at all.
  • Only existing terms can be chosen. A product with the value 6.5 is found only if the term 6.5 exists and lies between the handles.

Range slider for meta fields: dimensions, years and other numbers

When the value is a real measurement, a meta field slider is usually the better tool: it compares numbers, accepts from/to inputs and stays fast with thousands of different values. Setup with the Meta Fields extension:

  1. Open the Meta Data tab of the filter settings. Enter the key under Add Custom key by hands, or use Get keys from any product by its ID to see which keys a product has.
  2. Set the field's type to number and its view to Slider. The slider is not offered for text or date fields. Save.
  3. Open the field's additional options and fill Range as min^max, for example 10^250. Set Step (0.5 works), and if needed Prefix, Postfix (cm), Show inputs for from/to number boxes, and Use prettify for a thousands separator.
  4. Place the new filter item on the Structure tab like any other.

Useful keys: WooCommerce stores the shipping dimensions and weight of a product as _length, _width, _height and _weight. An ACF number field is stored under its field name. Details on meta keys are in the meta data documentation.

Things to know about meta sliders:

  • The range is never calculated. The slider shows exactly the Range you entered; an empty field falls back to 0–100. Finding the real minimum and maximum would mean reading every product on every page view. Dynamic recount decides which filters and values are shown, not where a slider starts and ends. Update the range when new products go beyond it.
  • Store plain numbers with a dot as decimal separator and no thousands separator: 1250.5. The database reads only the number at the start of the value, so 1,250.5 is compared as 1 and 1250,5 as 1250.
  • Years: range such as 1990^2026, step 1, and Use prettify set to No, otherwise 2026 is shown as 2 026.
  • Variations: the meta of the product itself is searched. If the value exists only on variations, also save it on the parent product, or use an attribute.

Decimal values: woof_slider_meta_query_type

By default the meta slider compares values as NUMERIC, which MySQL treats as whole numbers. A product with 10.11 is then found in the range 1–10, and 4.2, 4.4 and 4.6 all count as 4. To compare decimals, change the type with the woof_slider_meta_query_type filter:

/**
 * HUSKY: compare these meta sliders as decimal numbers.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_slider_meta_query_type', function ( $type, $meta_key ) {
    if ( in_array( $meta_key, array( '_length', '_width', '_height', 'screen_size' ), true ) ) {
        return 'DECIMAL(10,2)'; // up to 99999999.99
    }
    return $type;
}, 10, 2 );

In DECIMAL(M,D), M is the total number of digits and D the digits after the point. Choose them to fit your largest value: with DECIMAL(5,3) the maximum is 99.999, and every larger value is treated as 99.999.

Hide sliders that do not apply to the current category

  • Attribute slider: set Enable dynamic recount to Yes in its additional options. Values without products in the current category and filter selection disappear, and with fewer than two values left the slider is removed. Each value costs one extra count query, so on attributes with hundreds of terms watch the page speed or use a meta slider.
  • Meta slider: with Hide empty terms set to Yes on the Options tab, a meta slider that has no products within its range in the current results is not shown.

An attribute slider without values is removed by the plugin's script after the page has loaded, so its title can flash for a moment. This CSS hides it from the start (Appearance → Customize → Additional CSS, or your child theme stylesheet):

/* HUSKY: hide empty taxonomy sliders before the script removes them */
.woof_container_slider:has(.woof_hide_slider) {
    display: none;
}

When the product itself has a range

A slider finds products by one value per product. If a product covers a range (suitable for heights 150–190 cm, 3–10 players), there is no built-in "ranges overlap" search. Two workable models:

  • Two meta fields, for example players_min and players_max, each with its own slider. A visitor looking for a game for 4 players sets the first slider to 1–4 and the second to 4–10.
  • An attribute with one term per value (150, 151 ... 190), all fitting terms assigned to the product, and the attribute shown as a slider. Assign the terms in bulk rather than by hand.

Checklist

  • Attribute slider: global attribute, decimals written with a dot, Default sort order set to Name (numeric) or terms dragged into order, Logic of filtering at OR.
  • Meta slider: field type number, plain numeric values, Range filled in as min^max, a decimal type for fractional values.
  • Many distinct values or real measurements: a meta slider instead of an attribute with hundreds of terms.
  • Sliders in the wrong categories: Enable dynamic recount for attribute sliders, Hide empty terms for meta sliders.

If a slider still shows wrong values after these steps, ask on the HUSKY support forum with the attribute or meta key, a few example values and a link to the page.