How to Create a Letter Slider

In this tutorial, we will customize the Slider facet type to display letter labels.

How it works

The code below assumes a facet named letter_slider with a text field (e.g. Post Title) as the Data Source.

The first hook takes each field value, indexing the first letter’s ASCII decimal value (A=65, B=66, etc). This is because the slider facet expects numbers.

In the other hook, we use the facetwp/set_label/slider JS hook to swap each numerical label with its letter equivalent.

The code

<?php

function fwp_slider_alpha_to_number( $params ) {
    if ( 'letter_slider' == $params['facet_name'] ) {
        $first_letter = $params['facet_display_value'];
        $first_letter = strtoupper( substr( $first_letter, 0, 1 ) );

        // get ASCII number (A=65, Z=90)
        $params['facet_value'] = ord( $first_letter );
        $params['facet_display_value'] = ord( $first_letter );
    }
    return $params;
}
add_filter( 'facetwp_index_row', 'fwp_slider_alpha_to_number' );


function fwp_slider_set_label() {
?>
<script>
(function($) {
    $(function() {
        FWP.hooks.addAction('facetwp/set_label/slider', function($this) {
            var facet_name = $this.attr('data-name');
            var min = FWP.settings[facet_name]['lower'];
            var max = FWP.settings[facet_name]['upper'];
            var min_alpha = String.fromCharCode(parseInt(min));
            var max_alpha = String.fromCharCode(parseInt(max));
            var label = (min === max) ? min_alpha : min_alpha + ' &mdash; ' + max_alpha;
            $this.find('.facetwp-slider-label').html(label);
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_slider_set_label', 999 );