WordPress Sliding Price Scale Widget

I want a clean, interactive sliding-scale pricing widget added to the top of my WordPress home page. The slider should let visitors drag to any value within a range I can edit later in the back-end and instantly see the corresponding price update in real time.

It should support currency selector and 2 different plans. Pls check design in PDF.
Please also confirm with me how to manage pricing scheme.

Here is what I need delivered:

• A lightweight, responsive slider that matches my current site’s colours and fonts.
• Editable min, max and step values so I can adjust pricing without touching code.
• A live price display that updates smoothly as the user moves the slider.
• Gutenberg block or short-code output so I can drop it anywhere on the page.
• Clean, well-commented code that will survive theme or core updates.
• Support 2 different plans and currency selector and its calculation.
• Should also follow CSS from theme like (H2, standard text etc)

If you typically build with JavaScript frameworks (vanilla JS, jQuery or React), great—just keep load times tight. Feel free to suggest any plug-in or custom-coded approach; I’m open as long as the end result looks native and is easy for me to maintain.

Once the widget is installed and styled, a quick screencast or short PDF explaining how I can tweak the range, pricing and colours will be the final acceptance step.