How to modify the range slider to button option list in facet navigation.

To modify the range slider to a button option, you can replace the slider input elements with buttons and use JavaScript to handle the button clicks and update the range values. Here’s how you can modify your code:

{{#if showFacet}}
<div class="facets-faceted-navigation-item-range-facet-group" id="{{htmlId}}" data-type="rendered-facet" data-facet-id="{{facetId}}">
    <!-- ... (other code remains unchanged) ... -->

    <div class="facets-faceted-navigation-item-range-facet-group-wrapper">
        <span class=" facets-faceted-navigation-item-range-end" data-range-indicator="end">$ {{rangeToLabel}}</span>
        <span class=" facets-faceted-navigation-item-range-start" data-range-indicator="start">$ {{rangeFromLabel}}</span>
        
        <!-- Replace slider with buttons -->
        <button class="facets-faceted-navigation-item-range-slider-bar-right" data-control="low" aria-label="{{translate 'Decrease $(0) filter' facetDisplayName 'Button that decreases the minimum value of the range'}}">-</button>
        <button class="facets-faceted-navigation-item-range-slider-bar-left" data-control="high" aria-label="{{translate 'Increase $(0) filter' facetDisplayName 'Button that increases the maximum value of the range'}}">+</button>
    </div>

    <!-- ... (other code remains unchanged) ... -->

</div>
{{/if}}

<script>
    // JavaScript code to handle button clicks and update range values
    const rangeMin = {{rangeMin}};
    const rangeMax = {{rangeMax}};
    const step = 10; // Change this step value as needed

    const lowButton = document.querySelector('.facets-faceted-navigation-item-range-slider-bar-right');
    const highButton = document.querySelector('.facets-faceted-navigation-item-range-slider-bar-left');

    lowButton.addEventListener('click', () => {
        const currentLowValue = parseInt(lowButton.getAttribute('aria-valuenow'));
        const newLowValue = Math.max(currentLowValue - step, rangeMin);
        lowButton.setAttribute('aria-valuenow', newLowValue);
        // You can perform additional actions here, such as updating the UI or making API calls.
    });

    highButton.addEventListener('click', () => {
        const currentHighValue = parseInt(highButton.getAttribute('aria-valuenow'));
        const newHighValue = Math.min(currentHighValue + step, rangeMax);
        highButton.setAttribute('aria-valuenow', newHighValue);
        // You can perform additional actions here, such as updating the UI or making API calls.
    });
</script>

In this modified code, the range slider has been replaced with two buttons for increasing and decreasing the range values. The JavaScript code listens for button clicks and updates the range values accordingly. You can adjust the step variable to change how much the range values increase or decrease with each button click.