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:
-
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?
-
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.