The Slider facet is designed for numerical attributes, allowing users to filter products within a specific range (e.g., Price, Weight, or Dimensions). Instead of selecting discrete checkboxes, users can slide between a minimum and maximum value to find their ideal result.

Using sliders significantly improves the user experience for large datasets by reducing the number of individual filter options on the page.

Examples

Implementation

Implementing a slider requires two parts: configuring the attribute in the Tweakwise App and handling the specific response structure in your frontend.

1. Configuration in Tweakwise App

To enable a slider for an attribute:

• Go to the filtertemplate you want to contain the slider.
• Select or add the attribute (e.g., "Price").
• Set the Selection type to Slider.
• Ensure the attribute is imported as a numerical value (Integer or Decimal).

2. Handling the API Response

When a facet is configured as a slider, the Tweakwise Frontend API returns a specific set of attributes within the facet object. The selectiontype is set to slider, and the response will contain attributes to do a slider implementation in your storefront.

Default behaviour

The Delivery API returns two attributes for the bounds:

• The first attribute marks the minimum bound for the slider.
• The second attribute marks the maximum bound value for the slider.

{
  "facets": [
    {
      "facetsettings": {
        "title": "Price",
        "selectiontype": "slider",
        //..
      },
      "attributes": [
        {
          "title": "0",
          "isselected": false,
          //...
        },
        {
          "title": "1169.5",
          "isselected": false,
          //..
        }
      ]
    }
  ],
  "items": [],
  "properties": {
    ...
  }
}

<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <facets>
    <facet>
      <facetsettings>
        ...
        <title>Price</title>
        <selectiontype>slider</selectiontype>
        ...
      </facetsettings>
      <attributes>
        <attribute>
          <title>0</title>
          <isselected>false</isselected>
          ...
        </attribute>
        <attribute>
          <title>1169.5</title>
          <isselected>false</isselected>
          ...
        </attribute>
      </attributes>
    </facet>
  </facets>
  <items>...</items>
  <properties>...</properties>
  <redirects />
</navigation>

Applying selection

When the slider commits to a selection, the selected value can be passed to the api, split by a dash (-).
To filter by a range, pass the selected values to the API using the format [min]-[max].

If you are using the standard tn_fk_ parameters: ?tn_fk_price=10-200
If you are using the tn_filters parameter: ?tn_filters=price%3D10-200

On/after selection

When the filter is active, the Delivery API response will return the selected state using these attributes:

• The first attribute with isselected true marks the selected minimum value for the range slider.
• The second attribute with isselected true marks the selected maximum value for the range slider.
• The third attribute marks the minimum bound for the range slider.
• The fourth attribute marks the maximum bound for the range slider.

{
  "facets": [
    {
      "facetsettings": {
        "title": "Price",
        "selectiontype": "slider",
        //...
      },
      "attributes": [
        {
          "title": "0",
          "isselected": true,
          //...
        },
        {
          "title": "100",
          "isselected": true,
          //...
        },
        {
          "title": "0",
          "isselected": false,
         //...
        },
        {
          "title": "1169.5",
          "isselected": false,
          //...
        }
      ]
    }
  ],
  "items": [],
  "properties": {
    ...
  }
}

<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <facets>
    <facet>
      <facetsettings>
        ...
        <title>Price</title>
        <selectiontype>slider</selectiontype>
        ...
      </facetsettings>
      <attributes>
        <attribute>
          <title>0</title>
          <isselected>true</isselected>
          ...
        </attribute>
        <attribute>
          <title>100</title>
          <isselected>true</isselected>
          ...
        </attribute>
        <attribute>
          <title>0</title>
          <isselected>false</isselected>
          ...
        </attribute>
        <attribute>
          <title>1169.5</title>
          <isselected>false</isselected>
          ...
        </attribute>
      </attributes>
    </facet>
  </facets>
  <items>...</items>
  <properties>...</properties>
  <redirects />
</navigation>

Notes & Important Considerations

• Bucket Sliders: If the facet contains containsbuckets: true, it is a Bucket Slider. These require a different implementation as they use predefined ranges (histograms) rather than a linear scale. See Bucket Slider.
• Data Types: Only numerical attributes can be used as sliders. If your data contains strings (e.g., "10kg" instead of "10"), the slider will not function.
• Single Value results: If all products in the current selection have the same value (e.g., everything is $50), the rangemin and rangemax will be identical. Your frontend should handle this by disabling the slider or hiding the facet.
• Currency and Units: The API returns raw numbers. You must handle the formatting (symbols, decimals, units) in your frontend code based on your shop's locale settings.

FAQ

Q: How do I handle a slider if the user only selects one end of the range?
A: Tweakwise sliders are always range-based. If a user only wants "higher than 50", you should send the selection as 50-[max_value], where max_value is the maximum value returned by the API.

Q: Can I use decimals in the slider selection?
A: Yes. The API supports decimals. Ensure you use a dot (.) as the decimal separator in your API request (e.g., tn_fk_weight=1.5-5.0).