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

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

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

Author:
Alok

3 years ago

12.2k
Simple range slider

Author:
Nour Haider

2 years ago

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

10 months ago

1.7k
File upload

Author:
Laurits

2 years ago

12.6k
Upload file input field

Author:
Gopi Yadav

2 years ago

14.7k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

4.7k
Range Slider
Also, shows the current value of the slider while it is being slid

Author:
Nikolai

1 year ago

6.7k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

7 months ago

637
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

4 months ago

401
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

3 weeks ago

189
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components