Home > widget-integration > FilterController > bindUiFormatCurrencyForRangeSlider

FilterController.bindUiFormatCurrencyForRangeSlider() method

Binds currency formatting to range slider UI elements. Updates the currency unit display for price range sliders based on shop settings.

Queries all range slider unit elements and replaces their content with the formatted money symbol (e.g., "$", "€", "£", "₫") from the shop's money format. Respects the showCurrencyCodes setting to use the appropriate format.

Signature:

bindUiFormatCurrencyForRangeSlider(container?: HTMLElement): void;

Parameters

Returns:

void

Remarks

This method delegates to FilterRender.formatRangeSliderCurrency() to avoid code duplication. It ensures price range sliders display the correct currency symbol that matches the shop's configuration and showCurrencyCodes setting.

Example

Override to add custom currency formatting:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    bindUiFormatCurrencyForRangeSlider() {
      super.bindUiFormatCurrencyForRangeSlider();

      // Add custom text for multi-currency shops
      const units = document.querySelectorAll('.boost-sd__filter-option-range-slider-unit');
      units?.forEach(unit => {
        unit.setAttribute('data-currency', this.getCurrentCurrency());
      });
    }
  };
});