Drag Slider to Change Price

Design help Animations & Interactions
1

I’m trying to create a pricing page that changes the tab based on a slider. Looks like this:

Social Proof Pricing|354x500](upload://hBiR9xQKXBmiYSi6ej6qlf1dD.jpeg)

I have only found 1 Webflow project that was close to what I was looking for, but after actually building this myself successfully, I realized it only looks like it’s changing the plan, when actually it’s only changing which plan is highlighted… this is a big problem.

Inspiration that didn’t work: https://webflow.com/website/pricing-slider?rfsn=1238427.48b8d

So I turn to you Webflow community – essentially this component is 5 tabs with different prices under each. The tab navigation is not by clicking, but rather by moving your mouse over the designated tab which would look like a drag-and-drop slider. Sliding left or right reveals different plans.

Have any of you figured this out?

Thanks!
Austin Distel
CMO, Proof (useproof.com)

2

Add the design you want (“looks like this” is broken link.

Change price and than add to cart (E-commerce site?)

3

It looks like you guys figured this out!!! Are you able to share?