javascript - 配置 JQuery Price-Slider

Question

目前我正在使用 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 一样呈指数增长，然后一直上升到可用的最高价格

标签： javascriptjquery-ui

Answer 1

您可以使用 jQuery UI 的滑块（编辑：带范围）：

var sliderArray = [ 1,25,50,75,100,125,150,175,200,225,250,275,300,325,350,375,400,500,600,700,800,900,1000,2000,3000,4000,5000,6000 ];

var sliderConfig = {
  range: true,
  min: 0,
  max: sliderArray.length - 1,
  step: 1,
  slide: function( event, ui ) {
    $('#sliderValueFrom').val( sliderArray[ ui.values[0] ]);
    $('#sliderValueTo').val( sliderArray[ ui.values[1] ]);
  },
  create: function() {
    $(this).slider('values',0,0);
    $(this).slider('values',1,sliderArray.length - 1);
  }
};

$('#sliderId').slider(sliderConfig);

* {
    font-family:Arial;
    font-size:25px;
}
body {
    padding:25px;
}
#sliderId { margin:25px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>



<div id="sliderId"></div>

<input type="text" name="sliderValue" id="sliderValueFrom" value="" placeholder="Slider Value From" />
<input type="text" name="sliderValue" id="sliderValueTo" value="" placeholder="Slider Value To" />