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

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

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

8 months ago

1.5k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171
floting input

Author:
Md. Tofayel islam

1 year ago

2.7k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

1.9k
responsive slider carousel
slider carousel

Author:
Abhiraj

10 months ago

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

2 months ago

183
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

3.1k
slider /carousel
simple slider or carousel

Author:
Omer fils ELENGA

6 months ago

886
Tailwind Customize Slider
Test how to customize slider with tailwind css

Author:
yinyinkyaw

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components