change the min and max values dynamically based on the url parameters in jquery ui slider

Question

Hi i am using jquery ul slider for price filter. i pass the min and max price in the url parameters while slide.

$('.priceSlider').slider({
    range: true,
    min: 0,
    max: 2000000,
    values: [500000, 1500000],
    step: 10000,
    slide: function(event, ui) {
        // first range input(min)
        var firstValue = ui.values[0];
        // second range input(max)
        var secondValue = ui.values[1];

        window.location.href = "http://www.xxxx.com/sample.php?price_low="+firstValue+"&price_high="+secondValue;

        $('.priceSlider .sliderTooltip .stLabel').html(
            'R' + ui.values[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,") + 
            ' <span class="fa fa-arrows-h"></span> ' +
            'R' + ui.values[1].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,")
        );
        var priceSliderRangeLeft = parseInt($('.priceSlider .ui-slider-range').css('left'));
        var priceSliderRangeWidth = $('.priceSlider .ui-slider-range').width();
        var priceSliderLeft = priceSliderRangeLeft + ( priceSliderRangeWidth / 2 ) - ( $('.priceSlider .sliderTooltip').width() / 2 );
        $('.priceSlider .sliderTooltip').css('left', priceSliderLeft);
    }
});
$('.priceSlider .sliderTooltip .stLabel').html(
    'R' + $('.priceSlider').slider('values', 0).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,") + 
    ' <span class="fa fa-arrows-h"></span> ' +
    'R' + $('.priceSlider').slider('values', 1).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,")
);

The page will refresh with the min and max value parameters. after page reload the price range of min and max should be the parameter value. because after reload the price range become the default min and max value. please help me to fix this issue.

score 0 · Answer 1 · edited May 23 '17 at 11:45

The idea here could is to the the range value from the url if it is present.

var minValue = getParameterByName('price_low') || 500000;
var maxValue = getParameterByName('price_high') || 1500000;

$('.priceSlider').slider({
  range: true,
  min: 0,
  max: 2000000,
  values: [minValue, maxValue],
  step: 10000,
  slide: function(event, ui) {
    // first range input(min)
    var firstValue = ui.values[0];
    // second range input(max)
    var secondValue = ui.values[1];

    window.location.href = "http://www.xxxx.com/sample.php?price_low=" + firstValue + "&price_high=" + secondValue;

    $('.priceSlider .sliderTooltip .stLabel').html(
      'R' + ui.values[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,") +
      ' <span class="fa fa-arrows-h"></span> ' +
      'R' + ui.values[1].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,")
    );
    var priceSliderRangeLeft = parseInt($('.priceSlider .ui-slider-range').css('left'));
    var priceSliderRangeWidth = $('.priceSlider .ui-slider-range').width();
    var priceSliderLeft = priceSliderRangeLeft + (priceSliderRangeWidth / 2) - ($('.priceSlider .sliderTooltip').width() / 2);
    $('.priceSlider .sliderTooltip').css('left', priceSliderLeft);
  }
});



function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

This uses the getParameterByName() from How can I get query string values in JavaScript?

hi arun . i created the function and store value of min and max into the variables. but if print the variable inside the slider function it shows the error. i want to set the the min:variable_min and max: variable_max. — vinoth, Feb 11 '16 at 08:18
Hi now i call getparameterByName function into the slider.its working good. without any parameter i want to set the default value to the slider... — vinoth, Feb 11 '16 at 10:35

change the min and max values dynamically based on the url parameters in jquery ui slider

1 Answers1