The problem here is that when I enter values in my input, the default values get set back into my input. I want to keep them while updating my route query params. I thought of stripping values out of variables and assigning them back but, that is a bad idea since the values only return in a string in the reactive.

<script>
  let facetFilters = [
        `collections:${slug}`
    ]
    let priceFilter
    let priceLeft = 0;
    let priceRight = 5000;
    $: prices = [priceLeft, priceRight]
    $: {
       /**
        * Seperate the facets in to different arrays. If facet has multiple values each value is added to the same array item
        * All values of a facet are seperated by a comma like so vendor=Bikkel,Merida -> url output: ?vendor=bikkel%2Cmerida
        * The price will be fitered out of the facet filters array
        * */
        
            let params = [...$page.url.searchParams.entries()]
            console.log(params)
            let price = params.filter(([key]) => key == 'price')
            .map(([key, values]) => values.split(',').map((value) => `${key}:${value}`));
            
            /* Convert price that is currently in an array to string */
            priceFilter = price.toString() /* when the url is like this '?price=1200+TO+2400' the output will be: price:1200 TO 2400 */
            
            let result = params.filter(([key]) => key !== 'price')
            .map(([key, values]) => values.split(',').map((value) => `${key}:${value}`));

            facetFilters =  [facetFilters, ...result] 
            
            
           
  }
  async function search(key, value) {
        
        let query = new URLSearchParams($page.url.searchParams.toString())
        
        if(key == 'price') {
            let val = value.join(" TO ")
            query.set(key, val)
        } else {
            console.log(value)
            query.set(key, value.split(","))
        }
        
        return goto(`?${query.toString()}`);
    }
</script>

<div>
   <span>&euro;</span>
   <input type="text" placeholder="0" bind:value={priceLeft}/>
   <span>tot</span>
   <input type="text" placeholder="5000" bind:value={priceRight}/>
   <button type="button" on:click={ () => search('price', [priceLeft, priceRight])}>
       update
   </button>
</div>