El problema aquí es que cuando ingreso valores en mi entrada, los valores predeterminados se restablecen en mi entrada. Quiero mantenerlos mientras actualizo mis parámetros de consulta de ruta. Pensé en eliminar los valores de las variables y asignarlos nuevamente, pero esa es una mala idea ya que los valores solo regresan en una cadena en el reactivo.

 <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>