Filter collection by price with two text inputs

Hello, I am trying to add an option to sort through items in my collection by price using two text inputs to create a range (minimum price - maximum price). I am having a couple issues.

  1. Any number written into either text input, inputs the same value into the other text input. Ex( the number “5” is written into the minimum price text input, then the number “5” is shown in the maximum price text input.) I believe it could be do to both text inputs being connected to the same field in the collection.

  2. When a price is typed into the price filter, nothing shows up in the repeater that has the collection items displayed.

Also to note, I would like these price ranges to come up with the correct results without having the user be required to press a button to set the text input’s price range results… if possible. I don’t have much code to start with, I was having trouble finding the correct functions and such in the Velo API’s reference page, I don’t even know what code to start with to fix my first issue of the text inputs repeating itself. Any help is appreciated, thanks!

import wixData from ‘wix-data’ ;

$w ( ‘#minPrice’ ). onInput (( event ) => {
const minValue = parseInt($w ( ‘#minPrice’ ). value );
const maxValue = parseInt($w ( ‘#maxPrice’ ). value );
filterCollection ( minValue , maxValue );
});

function filterCollection ( minValue , maxValue ) {
wixData . query ( “Assets” )
. between ( “price2” , minValue , maxValue )
. find ()
. then (( results ) => {
$w ( ‘#repeater1’ ). data = results.items ;
}

Try this one…

import wixData from 'wix-data';

$w.onReady(()=>{
    $w('#minPrice').onChange((event)=> {
        let $item = $w.at(event.context);
        let minValue = parseInt($item('#minPrice').value);
        console.log("Min-Value: ", minValue);
        let maxValue = parseInt($item('#maxPrice').value);
        console.log("Max-Vlaue: ", maxValue);
        filterCollection(minValue, maxValue);
    });

    $w('#repeater1').onItemReady(($i, iData, index)=>{
        console.log("Item-Data: ", iData);
        $w('#pageElement').text = iData.xxxxxxxx;
    });
});


function filterCollection(minValue, maxValue) {
    wixData.query("Assets")
    .between("price2", minValue, maxValue)
    .find()
    .then((results)=> {
        console.log(results)
        console.log(results.items)
        $w('#repeater1').data = results.items;
    });
}

Thank you @russian-dima ! What kind of element is being used for ‘#pageElement’? It is coming up as an error in my code and I don’t know what to replace it with.
Thanks again

What kind of element is being used for ‘#pageElement’?
This question goes to you :grin:.
I don’t know what king of elements are inside of your REPEATER.

All i know is…

  1. DATABASE = " Assets "
  2. related DB-Field = " price2 "
  3. minValue → surely an INPUT-FIELD inside of your REPEATER.
  4. maxValue → surely an INPUT-FIELD inside of your REPEATER.

But before i continue…QUESTIONS !!!

  1. Is it a → MUST ← to have the 2 INPUT-FIELDS (min/max) inside of your REPEATER?
    Wouldn’t it make more sense to have them outside of repeater?
    You would need just 2 FIELDS (min/max).
    You can generate a FILTER-PANEL above your REPEATER where you can do all your filtering settings. Why having those INPUT-FIELDS inside of REPEATER?

  2. This one …also not completely correct…

$w('#minPrice').onChange((event)=>{
    let $item = $w.at(event.context);
    let minValue =parseInt($item('#minPrice').value);         
    console.log("Min-Value: ", minValue);
    let maxValue = parseInt($item('#maxPrice').value);         
    console.log("Max-Vlaue: ", maxValue);
    filterCollection(minValue, maxValue);
});

…should be devided into to separate event-functions → for min and max, calling the same function, like …

    $w('#minPrice').onChange((event)=> {
        let $item = $w.at(event.context);
        let minValue = parseInt($item('#minPrice').value);
        console.log("Min-Value: ", minValue);
        if(minValue && maxValue) {
            filterCollection(minValue, maxValue);
        }
    });

    $w('#maxPrice').onChange((event)=> {
        let $item = $w.at(event.context);
        let maxValue = parseInt($item('#maxPrice').value);
        console.log("Max-Vlaue: ", maxValue);
        if(minValue && maxValue) {
            filterCollection(minValue, maxValue);
        }
    });

Here in this part you put in all other elements which you have inside your repater…

$w('#repeater1').onItemReady(($i, iData, index)=>{
    console.log("Item-Data: ", iData);
    $w('#text1').text = iData.title;
    $w('#image').src = iData.image;
    $w('#WHATEVER-ELEMENT-ELSE').-----------
});

All your elements inside your repeater.