I’m currently using Shopify’s Search & Discovery app for product filtering. However, the app only provides From and To input fields for the price filter—it doesn’t include a built-in price slider.
I would like to add a price slider to my existing filter setup. Has anyone implemented this before? If possible, could you share a working custom code example or the best way to integrate a price slider with the Search & Discovery app’s existing price filter?
I’ve dealt with exactly this before, Shopify’s Search & Discovery app is solid for filtering, but the default “From/To” fields for price can feel clunky for users. Adding a price slider is definitely possible, but it’s not a simple toggle in the app itself.
A few things I’ve learned from implementing this:
JavaScript integration is key – you need to listen for slider changes and push the values into the existing filter form inputs so Search & Discovery can process them.
Liquid markup remains untouched – you don’t actually replace the price filter, you enhance it with a UI slider component.
UI libraries help – lightweight options like noUiSlider or ion.rangeSlider make it smooth and mobile-friendly.
It’s a bit technical, especially syncing the slider with the app’s filter state, so if needed, I could come in and aid you, if you aren’t comfortable with coding.
It’s not the App limitation, but rather your theme implementation.
Trial other themes (premium or newer ones) in your store and see if they offer you a slider.
It is possible to add this functionality to your theme, but it’s another point to select another theme if you already thinking about it.
Could you please guide me through the steps needed to integrate a price slider into my Shopify filters?
Even if I wanted to walk you through it, dropping a full block of code would just overwhelm the thread. I think a better way would be for you to send in your URL and collaborator code — that way we can rel4te via the store’s notifications box.
Store URL : testing store checking · Home · Shopify
code : 1343
Is it possible to do this without libraries such as noUiSlider or ion.rangeSlider? Can we write custom CSS and JavaScript?
Yes, it is possible.
Some examples to start building upon:
https://codepen.io/teplostanski/pen/wBKYPGg
https://codepen.io/carsonf92/pen/ZEmdQxN
https://codepen.io/noahblon/pen/poLmYaN
This doesn’t do anything
It’s an advanced theme customization beyond the scope of the forums.
Be realistic this isn’t some trivial thing either find a a theme with that feature, an app with that feature & theme integration, or hire a developer or a contributor here on the forum.
Hi @Michross ,
can you help me to do implement price range the using library called **noUiSlider.
**
Store URL : testing-store-checking.myshopify.com
code : 1343