Home
Michael Andreuzza
pricing slider with Tailwind CSS and Alpinejs

pricing slider with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Input Range Slider

Author Michael Andreuzza

2.4k

Fork Fullscreen

<section class="bg-white relative overflow-hidden">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
   <div>
    <h1>Pricing slider</h1>
    <p class="text-balance">
     Interact with the slider to see how it works. You will see how the
     price changes as you move the slider.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
   
   <div x-data="{ pageviews: 1000, price: 0 }" class="w-full">
    <div> <input type="range" id="pageviews" x-model="pageviews" min="1000" max="1000000" step="1000" class="w-full mt-2 border border-gray-300 appearance-none rounded-full h-8 px-2 outline-none overflow-hidden" @input="price = (Math.ceil(pageviews / 1000) * 0.001 * 50).toFixed(2)" style="--thumb-color: #f94121;"> </div>
    <div class="mt-4 flex items-center gap-x-2 w-full"> <label for="pageviews" class="block text-gray-500">Pageviews</label> <input type="number" id="inputPageviews" x-model="pageviews" class="border border-gray-300 rounded-lg px-2 py-1 w-full h-10 text-gray-700 outline-none focus:ring focus:ring-orange-600" @input="price = (Math.ceil($event.target.value / 1000) * 0.001 * 50).toFixed(2)"> </div>
    <div class="rounded-2xl p-8 mt-4 w-full border lg:flex lg:flex-col lg:justify-center">
     <p class="flex items-baseline"> <span class="text-4xl font-medium tracking-tight text-black flex">$<input type="text" id="price" x-model="price" readonly="" class="w-auto text-4xl border-none bg-transparent p-0 pointer-events-none"></span> </p>
     <div class="flex items-center gap-x-2 mt-4"> <label for="pageviews" class="block text-gray-500">Pageviews</label> <span x-text="pageviews.toLocaleString()">1,000</span> </div>
     <p class="text-sm lg:text-pretty mt-8 text-gray-500">
      This plan is tailored for small businesses and startups
     </p>
     <div class="mt-4"> <button type="submit" class="justify-center flex items-center gap-x-2 rounded-full bg-orange-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 w-full">Get access</button> </div>
     <p class="mt-6 text-xs leading-5 text-gray-500 text-pretty">
      Invoices and receipts available for easy company reimbursement
     </p>
    </div>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a pricing slider with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-pricing-slider-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/pricing-slider/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Range Slider

Author:
Alok

3 years ago

13.8k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

11.8k
Simple range slider

Author:
Nour Haider

2 years ago

15.2k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

7 months ago

1.3k
Login form

Author:
Gopi Yadav

3 years ago

10.8k
Search bar with icon

Author:
Steven Kuhn

3 years ago

14.8k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.1k
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.6k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

1 year ago

2.6k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

5 months ago

581
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

4 months ago

605
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components