How can I replace a slider price filter with an input box on my website theme?

[dangkhiem]

Hello. My website is vietmusic.vn
1 - I'm using a theme bought on themeforest.net I really like this theme but it has an error filtering by price. Furthermore, the current theme's price filter is a slider, I like to use the price filter in the form of an input box.
I like shopify price filter (use default on shopify free themes), is there any way to replace price filter on my theme with shopify price filter?
2 - I have an idea like this: I want on the custom liquid collection page to have a search box by price, it will include an input field, when the customer enters the price in the search box (eg: 1000) then the result will show products in that collection with the same price as the price the customer entered (for example it will show products in that collection with prices between 900 and 1100).
I'm trying to figure out how to combine these 2 codes together:
Code 1: This is the code I use for fast page switching on the collection page.
<form action=" https://vietmusic.vn/collections/ {{ collection.handle }}" method="get" align="center">
<input type="number" name="page" placeholder="Go to page..." />
<

Code 2: This is the code I use on the product page to find similarly priced products.
<a href= " https://vietmusic.vn/collections/all ?
filter.p.product_type={{ product.type }}
&filter.v.price.gte={{ product.price | times:0.90 | money_without_trailing_zeros } }
&filter.v.price.lte={{ product.price | times:1.10 | money_without_trailing_zeros }}
&sort_by=price-ascending
">
{{ product.type }} Same price product{{ product.price | money_without_trailing_zeros }}
</a>
I want results like this:
<form action=" https://vietmusic.vn/collections/ {{ collection.handle }}?&filter.v.price.gte={{ XXX | times: 0.90 | money_without_trailing_zeros }}
&filter.v.price.lte={{ XXX | times:1.10 | money_without_trailing_zeros }}"
method="get"
align="center">
<input type="number" />
<button type="submit" />Search</button>
</form>
XXX is the price that the customer enters in the input box.
I don't know how, but when the customer enters the price in the input box, it automatically goes to the XXX position.
Can you help me, or if there is any other way please guide me.
Thanks a lot!

[magecomp · Accepted solution]

Hello @dangkhiem 

Try following

<form action="https://vietmusic.vn/collections/{{ collection.handle }}" method="get" align="center">
  <input type="hidden" name="sort_by" value="price-ascending" />
  <input type="number" name="filter.v.price.gte" placeholder="Minimum price" step="0.01" />
  <input type="number" name="filter.v.price.lte" placeholder="Maximum price" step="0.01" />
  <button type="submit">Search</button>
</form>

In this code, the form uses the filter.v.price.gte and filter.v.price.lte parameters to define the price range. The sort_by parameter is set to "price-ascending" to ensure the products are sorted by price.

When the customer enters the minimum and maximum prices in the input fields and submits the form, the form will generate a URL like:

https://vietmusic.vn/collections/{collection-handle}?filter.v.price.gte={minimum-price}&filter.v.price.lte={maximum-price}&sort_by=price-ascending

Replace {collection-handle} with the handle of your collection, {minimum-price} with the entered minimum price, and {maximum-price} with the entered maximum price.

When the customer submits the form, the page will reload with the products in the collection that fall within the specified price range.

Make sure to place this code within the appropriate section of your custom liquid collection page template.

Note: The code provided assumes that your theme and collection page template support the necessary URL parameters for filtering by price. If your theme or collection page does not support these parameters, you may need to customize your theme

[dangkhiem]

Thank you very much, you helped me to solve the problem.
by the way, please help me to solve the following problem:
1: when customers filter by brand and product type first, then search by price, then search by price will clear the filter by brand and product type, search results by price will appear all brands and types of products previously removed.
Is there a way when searching by price will only find the products in the previously filtered list?
2: our smallest currency is 1000, so is there a way when a customer searches for a product that costs 100000 just type 100 into the input box? It is similar to the code "times: 1000"
thank you very much!