Extension for heimrichhannot/contao-filter-bundle that extends choice field with range appearance

0.2.3 2022-04-22 13:22 UTC

This package is auto-updated.

Last update: 2023-01-22 15:12:20 UTC


This bundle offers support for the JavaScript library noUiSlider for the Contao CMS.


  1. Install via composer: composer require heimrichhannot/contao-no-ui-slider-bundle.
  2. Update Database.


Activate NoUiSlider for a "choice filter"

  1. Create a choice field as usual in heimrichhannot/contao-filter-bundle.
  2. Activate the option "Add noUiSlider support".

Activate NoUiSlider for a "multiple range filter"

  1. Create 2 text filter elements which represent the two borders of the filter interval. It's important that the filter element type is text.
  2. Create a multiple range filter element and link the text filters created in the step before.
  3. Activate the option "Add noUiSlider support".


When you change the set value of the slider it matches the current value to the corresponding input field. To set the slider to its min value means that all input fields are unchecked. In that case no change or click event is triggered. Therefore the custom event filterAsyncSubmit ist dispatched in this situation. Use this event to initiate the async submit.


Bundle assets are provided as yarn package. Sources and JavaScript documentation can be found in src/Resources/npm-package.