Unexpected Bug: Disabled Slider Button and Filters

Hello Forum,

I have a database of companies that I would like to filter using a slider button so that users can establish a maximum and minimum number of employees, in this case, to search for. I have a filter function working great for a number of dropdown menus, but I run into issues when I add the sliders.

Currently, I have two sliders, one for the min and then one for the max number of employees. In my filter function, I then use a “between” function to search between the min and max.

My questions are as follows:

  1. Is there an option where a single slider can have a min and max button, instead of two sliders: one for max, and one for min?

  2. When my website is loaded, the sliders are initialized just fine. However, the moment I change either another dropdown menu, or one of the sliders, both sliders jump to the same value, and the sliders become inactive. I don’t see obvious sort of feedback loop that would cause the two sliders to take one one another’s value, and I’m not sure why the sliders then become inactive.

I initialise the sliders using this function, which seems to work fine until the filter functionality is added. The “minimal” option is used in setting the initial min and max value of the scales:

$w.onReady(() => {
    createDropDown("OrganizationList","country","#iddCountry");
    createDropDown("OrganizationList","state","#iddState");
    createDropDown("OrganizationList","city","#iddCity");
    createDropDown("OrganizationList","sector","#iddOrgType");
    createDropDown("OrganizationList","developmentFocus","#iddDevFocus");
    setSliderOptions("OrganizationList","liemployees","#islEmpMax","max");
    setSliderOptions("OrganizationList","liemployees","#islEmpMin","min");
});

----------------------------------------------------------
// createDropDown() omitted for clarity of code snippet.
----------------------------------------------------------

// Load continents dropdown using the distinct() function on the query
function setSliderOptions(database,category,slidername,minmax) {
 // Run a query that returns all the items in the collection
    console.log('setSliderOptions Activated')
    wixData.aggregate(database)
        .max(category)
        .run()
        .then( (results) => {
            $w(slidername).enable();
            $w(slidername).max = results.items[0].liemployeesMax;
            $w(slidername).min = 1;
            $w(slidername).step = 1;
            $w(slidername).stepType = "value";
 if (minmax == 'max'){
                $w(slidername).value = results.items[0].liemployeesMax;
            }
 if (minmax == 'min'){
                $w(slidername).value = 1;
            }
            } );
}

The filter function is called when the dropdown or slider values are changed. It seems that calling this function changes both sliders to the same value and then inactivates the slider buttons. I have two onChange functions: islEmpMin_change(event), islEmpMax_change(event). These pass the current slider value to the filter function as variables “empmin” and “empmax.” I then call a newFilter function using “newFilter.between()”:

// Set some indefined variables that will hold the company and region search ()
let lastFilterConame;
let lastFilterRegion;
let lastFilterCountry;
let lastFilterCity;
let lastFilterState;
let lastFilterOrgType;
let lastFilterDevFocus;
let lastFilterEmpMin;
let lastFilterEmpMax;

lastFilterEmpMin = $w("#islEmpMin").value;
lastFilterEmpMax = $w("#islEmpMax").value;

--------------------------------------------------------------
// Other onChange events for dropdown and free text search 
// go here.  They also call the filter function.
// Omitted to shorten code snippet and provide clarity.
--------------------------------------------------------------

export function islEmpMin_change(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    console.log('islEmpMin change before filter')
    filter(lastFilterConame, lastFilterCountry, lastFilterCity, lastFilterState, lastFilterOrgType, lastFilterDevFocus, lastFilterRegion, $w('#islEmpMin').value, lastFilterEmpMax);
    console.log($w('#islEmpMin').value)
}

export function islEmpMax_change(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
    console.log('islEmpMax change before filter')
    filter(lastFilterConame, lastFilterCountry, lastFilterCity, lastFilterState, lastFilterOrgType, lastFilterDevFocus, lastFilterRegion, lastFilterEmpMin, $w("#islEmpMax").value);
    console.log($w('#islEmpMax').value)
}

function filter(Coname, countrydd, citydd, usstatedd, orgtypedd, devfocusdd, regiondd, empmin, empmax){//, citydd, statedd, orgtypedd, devfocusdd){
 if (lastFilterConame !== Coname || lastFilterCountry !== countrydd || lastFilterCity !== citydd || lastFilterState !== usstatedd || lastFilterOrgType !== orgtypedd || lastFilterDevFocus !== devfocusdd || lastFilterRegion !== regiondd || lastFilterEmpMin !== empmin || lastFilterEmpMax !== empmax){
 let newFilter = wixData.filter();
        console.log('filter activated')
 if (Coname)
            newFilter = newFilter.contains('organizationName', Coname);
            console.log('Coname Filtering')
 if (regiondd)
            console.log('region selected in filter')
 if (regiondd === 'Africa') {
                console.log('Africa Engaged')
                newFilter = newFilter.eq('africa', 1);
            }
 if (regiondd === 'Asia-Pacific') {
                newFilter = newFilter.eq('asiaAus', 1);
                console.log('Asia Engaged')
            }
 if (regiondd === 'Europe') {
                newFilter = newFilter.eq('eur', 1);
                console.log('Europe Engaged')
            }
 if (regiondd === 'Latin America') {
                newFilter = newFilter.eq('latAm', 1);
                console.log('LatAm Engaged')
            }
 if (regiondd === 'Middle East') {
                newFilter = newFilter.eq('midEast', 1);
                console.log('MidEast Engaged')
            }
 if (regiondd === 'North America') {
                newFilter = newFilter.eq('nAmerica', 1);
                console.log('NorthAmerica Engaged')
            }
 if (countrydd)
            newFilter = newFilter.eq('country', countrydd);
            console.log('countrydd Filtering')
 if (citydd)
            newFilter = newFilter.eq('city', citydd);
            console.log('citydd Filtering')
 if (usstatedd)
            newFilter = newFilter.eq('state', usstatedd);
            console.log('statedd Filtering')
 if (orgtypedd)
            newFilter = newFilter.eq('sector', orgtypedd);
            console.log('orgtypedd Filtering')
 if (devfocusdd)
            newFilter = newFilter.eq('developmentFocus', devfocusdd);
            console.log('devfocusdd Filtering')
 if (empmin)
            newFilter = newFilter.between('liemployees', empmin, lastFilterEmpMax);
            console.log('EmpMin Filtering')
 if (empmax)
            newFilter = newFilter.between('liemployees', lastFilterEmpMin, empmax);
            console.log('EmpMax Filtering')
        $w('#dataset1').setFilter(newFilter);
        lastFilterConame   = Coname;
        lastFilterCountry  = countrydd;
        lastFilterCity     = citydd;
        lastFilterState    = usstatedd;
        lastFilterOrgType  = orgtypedd;
        lastFilterDevFocus = devfocusdd;
        lastFilterRegion   = regiondd;
        lastFilterEmpMin   = empmin;
        lastFilterEmpMax   = empmax;
    }
}

I’m am eager to hear if others have encountered this problem, or see any glaring issues with the code.

That’s a lot of code to sort through out of context. Please post the URL and explain how and where to see the problem.

Hello Yisrael,

Thank you for your response, and I apologise for the long code. Here is the Website .

When you arrive at the home page, you will have a list of dropdown and other options to filter database results. I recently added to this two slider buttons for the min/max number of employees for filtering. The issue is that when you interact with the slider buttons, the other slider jumps to the same value, and they both become disabled. This also happens when other dropdown or other filter options are called.

In the case that one interacts with one slider, the other jumps to the changed value and is disabled.

In the case that a menu option is selected, both sliders seem to jump to value of the first repeater item, and are then disabled.

Well, a couple things jump out…

Screen elements, such as the Slider elements, can only be accessed within a page event handler, such as the page’s onReady() function, or element event handlers, such as onChange(), onClick(), and others. Lines 366/7 and won’t work where you currently have them.


Perhaps, the variables lastFilterEmpMin and lastFilterEmpMax should be initialized inside of the page’s onReady() function.

You don’t have either slider onChange() event handler connected to its Slider. As you can see in the screenshot, the field for the onChange() event handler is blank:


See I want to respond to button clicks and page events for more details.

There might be other issues as well, but the above issues I saw immediately and caused the sliders to malfunction.

Hello @yisrael-wix ,

Thank you for your insight. I have both sliders connected to their respective “onChange” event (rookie mistake, thank you!), and then got rid of the initialisation of values (LastFilterEmpMin and LastFilterEmpMax) on line 366 and 367. I just let the LastFilterEmpMin and Max values be undefined like the others. I am doing this to match the way that all the other values are being initialized for the filter function.

However, I get the same behaviour from the sliders. They come to the same value and are disabled when the sliders are changed, and they take on the first repeater value when any dropdown or the text search are changed.

It seems to me that the problem is in the filtering itself, as the issue only arises when values are changed and the function is engaged.