jQuery UI slider for price filter. It's my temporary solution. I use it with my theme based on Classic.
In this file
sitename/themes/classic/templates/catalog/_partials/facets.tpl
after the string
{if $facet.widgetType !== 'dropdown'}
insert this
{if $facet.type == 'price'} <div class="slider-range-wrapper"> <p> <input type="text" id="amount" readonly> <a id="submitprice"> <button class="btn btn-secondary">OK</button> </a> </p> <div id="slider-range" data-type="{$facet.type}" data-quantity="{$filter.magnitude}" data-min-value="{$facet.properties.min}" data-max-value="{$facet.properties.max}"></div> </div> {/if}
and at the end of the file add this script
<script type="text/javascript"> $('#search_filters').ready(function() { var langShop = prestashop.language.iso_code; var langPrice = $('.slider-range-wrapper').parent().children('.facet-title')[0].innerHTML; var pageURLIndex = -1; var sliderPrice = function() { var minValue = $('#slider-range').data('min-value'); var maxValue = $('#slider-range').data('max-value'); $('#slider-range').slider({ range: true, min: minValue, max: maxValue, values: [minValue, maxValue], slide: function(event, ui) { $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign); }, stop: function(event, ui) { pageURLIndex = window.location.href.indexOf("?"); $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign); $('#submitprice').attr("href", window.location.href + ((pageURLIndex === -1) ? '?q=' : '/') + langPrice + '-' + prestashop.currency.sign + '-' + $('#slider-range').slider('values', 0) + '-' + $('#slider-range').slider('values', 1)); } }); $('#amount').val($('#slider-range').slider('values', 0) + ' ' + prestashop.currency.sign + ' - ' + $(' #slider-range').slider('values', 1) + ' ' + prestashop.currency.sign); }; sliderPrice(); }); </script>