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

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.8k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.5k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

11 months ago

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

Author:
Cristian

1 year ago

2.1k
login
html , css

Author:
Hacker Development

8 months ago

546
slider models
Tailwind slider models

Author:
QQ-VVN

8 months ago

662
Sign in / Login Form

Author:
Bunny

3 years ago

13.6k
Product Form - Reverie

Author:
S V

8 months ago

620
Upload file input field

Author:
Gopi Yadav

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components