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

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

2 years ago

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

Author:
Alok

2 years ago

11.3k
Simple range slider

Author:
Nour Haider

1 year ago

14.3k
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

2 months ago

625
Single Input newsletter form

Author:
Task Master

2 years ago

10k
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

7 months ago

893
Sign in / Login Form

Author:
Bunny

2 years ago

12.4k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

7 months ago

898
Float Input

Author:
Maxim

1 year ago

3.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

7 months ago

1.6k
Toggle button

Author:
Matthew Chen

1 year ago

11.7k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components