Single dropdown filter using a range

Ask the community
,
1

Is there any way to use a single dropdown menu to filter a range of numbers instead of two dropdowns using a min and max?

2

Hello,

As you cannot add more than one value to a choice, you can use single drop down with the minimum values ( in your case - 1, 10000, 25000, 50000, 100000 etc . ), then add a variable that handle the maximum number which you assign based on the minimum value ( 10000, 50000 etc. ). This snippet code should help understanding the idea :

export function dropdown_change(event) {
let max=0;
let min = $w("#dropdown").value;
if(min == 100){
    max = 400;
}
console.log(min,'-', max)
}

Hope this helps!
Best,

Mustafa

3

Mustafa’s answer is the easy way and correct. You can even set the dropdown item label with the range (e.g. “100-400”), but the dropdown item value would be 400.

If you want to complicate your life, you can set the dropdown item values to a string that has the range (e.g. “100-400”). However, then you’ll have to parse the value string (in the dropdown_change event handler) to retrieve the min and max values from the string. Something like this:

let valStr = $w("#dropdown").value;
let range = valStr.split("-");
let min = range[0];
let max = range[1];

The only reason that you should choose this method over Mustafa’s is if you need ranges that have gaps (e.g. 100-400, 800-1000).