StatusSupport
Tweakwise.comTweakwise AppContact

Slider

When selectiontype is set to slider, our Frontend API response will contain a specific set of attributes to do a slider implementation in your storefront.

These attributes result in set of bounds and a set of selection values.

{
  "facets": [
    {
      "facetsettings": {
        "title": "Price",
        "selectiontype": "slider",
        "containsclickpoints": false,
        "containsbuckets": false
        //..
      },
      ...
    }
  ]
}

<navigation xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <facets>
    <facet>
      <facetsettings>
        ...
        <title>Price</title>
        <selectiontype>slider</selectiontype>
        <containsclickpoints>false</containsclickpoints>
        <containsbuckets>false</containsbuckets>
        ...
      </facetsettings>
      ...
    </facet>
  </facets>
  ...
</navigation>

Default behaviour

The Frontend 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 (-).
For example: if a range of 10 to 200 is selected, the API querystring parameter should be tn_fk_price=10-200

On/after selection

When the filter is active, the Frontend 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>

📘

Note

If containsclickpoints or **containsbuckets** is set to true, read our guide on Bucket Slider.