Для настройки JQuery Price-Slider

Vin Dev спросил: 11 марта 2019 в 07:43 в: javascript

В настоящее время я использую ползунок jQuery UI, чтобы люди могли выбирать диапазон цен. Проблема в том, что слайдер имеет небольшой размер и должен компенсировать минимум 1 евро и максимум 6000 евро. Предлагаемое решение заключается в использовании небольшого приращения, возможно, кратного 25–400 евро, а затем экспоненциального роста, например, 500, 750, 1000, а затем до максимальной доступной цены.

Я уже создал это вид ползунка, но я использую статические значения (см. прилагаемый код), но проблема в том, что когда есть какой-либо продукт с максимальным диапазоном 400, все эти значения по-прежнему отображаются на слайдере. Будем признательны за вашу помощь.

(function ($) {
    $.fn.priceSlider = function (options) {
        var settings = $.extend({
            setRedirect: false //redirect false for mobile version
        }, options);        return this.each(function () {
            var $slider = jQuery(this),
                minPrice = Number($slider.attr('data-min')),
                maxPrice = Number($slider.attr('data-max')),
                valueMin = Number($slider.attr('data-valueMin')),
                valueMax = Number($slider.attr('data-valueMax')),
                inputMin = $slider.siblings('span[data-from]'),
                inputMax = $slider.siblings('span[data-to]'),
                requestUrl = $slider.attr('data-request'),
                redirect = settings.setRedirect;            inputMin.text(valueMin);
            inputMax.text(valueMax);            var submitButton = jQuery('.off-canvas-navigation .button-container #button-apply-filter');
            var clearAllButton = jQuery('.off-canvas-navigation .button-container #button-remove-filter');            // var range = getRange;
            var rangeOne = {
                'min': [minPrice],
                '5%': 25,
                '10%': 50,
                '15%': 75,
                '20%': 100,
                '25%': 125,
                '30%': 150,
                '35%': 175,
                '40%': 200,
                '45%': 225,
                '50%': 250,
                '55%': 275,
                '60%': 300,
                '62.5%': 325,
                '65%': 350,
                '67.5%': 375,
                '70%': 400,
                '72.5%': 500,
                '75%': 600,
                '77.5%': 700,
                '80%': 800,
                '85%': 900,
                '90%': 1000,
                'max': [maxPrice]
            };
            var rangeTwo = {
                'min': [minPrice],
                '6%': 25,
                '12%': 50,
                '18%': 75,
                '24%': 100,
                '30%': 125,
                '36%': 150,
                '42%': 175,
                '48%': 200,
                '54%': 225,
                '60%': 250,
                '66%': 275,
                '72%': 300,
                '78%': 325,
                '84%': 350,
                '90%': 375,
                'max': [maxPrice],
            }            function getRange(valueMax) {
                if (valueMax >= 400) {
                    return rangeOne;
                } else {
                    return rangeTwo;
                }
            }            $slider.noUiSlider({
                start: [valueMin, valueMax],
                connect: true,
                snap: true,
                behaviour: 'drag',
                //step: 25,
                range: getRange(valueMax)
            }).on({
                    slide: function (e, values) {
                        if (values == undefined) {
                            var values = [];
                            values[0] = minPrice;
                            values[1] = maxPrice;
                        }
                        inputMin.text(Math.round(values[0]));
                        inputMax.text(Math.round(values[1]));                    },
                    change: function (e, values) {
                        if (values == undefined) {
                            var values = [];
                            values[0] = minPrice;
                            values[1] = maxPrice;
                        }
                        submitButton.removeClass('inactive');
                        clearAllButton.removeClass('inactive');                        var minValue = Math.round(values[0]),
                            maxValue = Math.round(values[1]);                        if (redirect == true) {
                            window.location = requestUrl.replace('%minPrice%', minValue).replace('%maxPrice%', maxValue) + '#main';
                        }
                        else {
                            submitButton.attr('data-request', requestUrl.replace('%minPrice%', minValue).replace('%maxPrice%', maxValue));                            if (!clearAllButton.hasClass('inactive')) {
                                clearAllButton.on('click', function (e) {
                                    $slider.find('.noUi-origin.noUi-connect').css('left', '0%');
                                    $slider.find('.noUi-origin.noUi-background').css('left', '100%');
                                    $slider.attr('data-valueMin', minPrice).attr('data-valueMax', maxPrice);
                                    $slider.trigger('slide').trigger('change');
                                    clearAllButton.addClass('inactive');
                                });
                            }
                        }
                    }
                }
            );        });
    }
}(jQuery));

Слайдер цен должен использовать небольшой прирост, может быть кратный 25–400 евро, а затем экспоненциально расти, например, 500, 750, 1000, а затем до максимальной доступной цены

0 ответов