Svelte on navigation, how to keep input values?

Question

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>

Answer 1

I assume that if the user navigates for the first time, you want to calculate the prices, and thereafter keep what the user entered. If this is the case, you could try and write your values to a store, and then, in your reactive block you either return what's in the store, if there is anything, or return your calculation.