<?php
// Customize Slider facet labels.
// This example removes trailing zero's,
// replaces the — icon with a right arrow icon,
// and add spans with class "slider-min" and "slider-max" around the min and max labels.
// Replace 'my_slider_facet_name' with the name of your Slider facet
?>
<script>
document.addEventListener('facetwp-loaded', function() {
FWP.hooks.addAction('facetwp/set_label/slider', function($this) {
// Replace 'my_slider_facet_name' with the name of your Slider facet.
var facet_name = 'my_slider_facet_name';
if ( $this.nodes[0].attributes['data-name'].value == facet_name ) {
// Get all settings.
var min = FWP.settings[facet_name]['lower'];
var max = FWP.settings[facet_name]['upper'];
var format = FWP.settings[facet_name]['format'];
var opts = {
decimal_separator: FWP.settings[facet_name]['decimal_separator'],
thousands_separator: FWP.settings[facet_name]['thousands_separator']
};
var from = nummy(min).format(format, opts);
var to = nummy(max).format(format, opts);
// Remove trailing zeros from the value strings, see: https://stackoverflow.com/a/24295147
from = from.replace(/^0+(\d)|(\d)0+$/gm, '$1$2');
to = to.replace(/^0+(\d)|(\d)0+$/gm, '$1$2');
// Put the label back together, and add spans with class "slider-min" and "slider-max" around the min and max labels.
var label =
'<span class="slider-min">'
+ FWP.settings[facet_name]['prefix']
+ from
+ FWP.settings[facet_name]['suffix']
+ '</span>'
+ ' → ' // Replace the — icon with a right arrow icon
+ '<span class="slider-max">'
+ FWP.settings[facet_name]['prefix']
+ to
+ FWP.settings[facet_name]['suffix'];
+ '</span>'
$this.find('.facetwp-slider-label').html(label);
}
});
});
</script>
<?php
}, 100 );