Can a slider input element be used to filter a repeater?

Ask the community
,
1

Question:
Can a slider input element be used to filter a repeater?

Product:
Wix Studio

What are you trying to achieve:
I’m trying to sort data using a slider instead of a dropdown or checkbox (price filter for real estate)

What have you already tried:
Other input elements, forum, help center

Additional information:
Real estate listings price filter slider

2

Yes this can be done easely (at least by CODE).

3

Having trouble finding the correct way to integrate it… any suggestions?

4

All information about the SLIDER-element you will find here…

A slider has 3 different values, like min, max and current value.

Setup first min and max values.

a) $w(“#mySlider”).max = 10;
b) $w(“#mySlider”).min = 1;

Also define the steps a SLIDER should do when you slide the slider to left or right (up or down)…

c) let sliderStep = $w(“#mySlider”).step; // 5

And at least define also the Step-Type of your slider…

d) let sliderStepType = $w(“#mySlider”).stepType; // “count”

Once defined, you can use your SLIDER.

$w("#myElement").onChange( (event) => {

    let newValue = event.target.value; // "new value"

});
5

Thanks for helping… I’m just not seeing how the slider would control the repeater.
This is my code:

import wixData from ‘wix-data’;

$w.onReady(function () {
// Set an event handler for the slider’s input event
$w(“#slider1”).onChange((event) => {
// Get the slider value
let sliderValue = event.target.value;

    // Filter the dataset based on the slider value
    wixData.query("emotionsDataset")
        .ge("scale", sliderValue)
        .find()
        .then((results) => {
            // Update the repeater with the filtered data
            $w("#repeater1").data = results.items;
        });
});

});

7

Found the solution:

import wixData from ‘wix-data’;

$w.onReady(function () {
console.log(“Slider Input Event Triggered”);
$w(“#slider1”).onChange((event) => {
// Get the slider value
let sliderValue = event.target.value;
wixData.query(“Emotions”)
//.eq(“thisisaTest”, sliderValue)
.ge(“thisisaTest”, sliderValue - 2) // Greater than or equal to value - 3
.le(“thisisaTest”, sliderValue + 2) // Less than or equal to value + 3
.find()
.then((results) => {
// Update the repeater with the filtered data
$w(“#repeater1”).data = results.items;
});
})