Price range “min’ and “max” attributes

I’m using in on a closed, dev-only environment.

I’m using _price as a meta tag, but it happens on every input type=”number”. Where’s the issue:

• input type=”number” is missing its “min” and/or “max” value. It already has “data-min” and/or “data-max”. E.g. you can either use input type=”number” or a slider, if enabled, to set values that are “not allowed” to be set. Like i said before, in my case, i’ve got 1.349 as min. price and 3.299 as max. price in a specific category. If slider is enabled, make sure you don’t have any active filters selected, then either grab “min” slider even more to the left or right slider even more to the right, and you’ll see that input type=”number” will be disabled and a slider won’t work anymore.

• Another problem with input type=”number is:

You are even able to set negative values somehow…

• This reply was modified 1 year, 2 months ago by johnwandler. Reason: Fixed typos

https://smartwebsite.pl/filter-everything_test/sklep/

Frest install, two products with different prices. Everything is just default, basically. SAME ISSUE. My settings on fresh install:

Done, my bad.

Everything is “new”. That installation is on a different server, no custom changes. After adding:

$(document).on('change input blur focus', '.wpc-filters-range-min', function(){ $(this).removeAttr('disabled')}

it’ll no longer display 403. Looks like disabling inputs (price in this case) is not recommended. Also you’ve mentioned that negative numbers are allowed, because people requested it. One simple “if” statement checking for “_price” meta is enough. You don’t even have to add server-side validation, because it’s not a critical function, it’s only a sorting addon, but adding some jQuery to check for empty/NaN/too low/too high values would be super helpful.

My super lazy, unoptimized code (there’s even a gap in “range-min” checking), not finished code fixed a lot of problems. I’ve been checking for multiple events just to be sure that everything works as it should. I will no longer update this, because i found another addon/widget.

    $('.wpc-filters-range-min').attr('min', $('.wpc-filters-range-min').attr('data-min'))

    $('.wpc-filters-range-max').attr('max', $('.wpc-filters-range-max').attr('data-max'))

    $(document).on('change input blur focus', '.wpc-filters-range-min', function() {

        $(this).removeAttr('disabled')

        $(this).attr('min', $(this).attr('data-min'))

    })

    $(document).on('change input blur focus', '.wpc-filters-range-max', function(e) {

        $(this).attr('max', parseFloat($(this).attr('data-max')))

        if (parseFloat($(this).val()) >= parseFloat($(this).attr('data-max'))) $(this).val(parseFloat($(this).attr('data-max')))

        if (parseFloat($(this).val() == '0')) $(this).val(parseFloat($(this).attr('data-max')))

        if ((e.type === 'blur' || e.type === 'change') && (parseFloat($(this).val()) < parseFloat($('.wpc-filters-range-min').attr('data-min')) || $(this).val() == '')) $(this).val(parseFloat($(this).attr('data-max')))

        $('.wpc-filters-range-min, .wpc-filters-range-max').removeAttr('disabled')

    })

Try one more thing, as i said before “(…) make sure you don’t have any active filters selected, then either grab “min” slider even more to the left or right slider even more to the right (…)”. On this video, you’ve started by dragging right slider to the left, try pull that slider even more to the right, or left even more to the left. URL must be clean – no active filters must be present.

https://vimeo.com/1072504041/8cf667aaed?share=copy

I wasn’t able to record console, but it actually prints out errors as i reported before.

• This reply was modified 1 year, 2 months ago by johnwandler. Reason: Added link to a video
• This reply was modified 1 year, 2 months ago by johnwandler. Reason: Added comment for console