CARPE Slider v3.0


The CARPE Slider is an html form input component, written in JavaScript, that displays input elements of type range as sliders that can be styled with css.

Try the quick demo, check out features and news, get started and download, or go straight to the full documentation or test page!

Quick Demo

Try out this simple demo slider above! Drag to adjust. Click or tap on the slider panel to jump. Double-click to reset. Hover to see current numerical value.

You can also use the keyboard to control sliders. Try it with the demo sliders above to select an rgb-color. Use the tab key (and shift + tab) to navigate between sliders. Use arrow keys to adjust. Press the delete key to reset.



Get started

  1. Download the free or the pro version below.
  2. Place the script file and the stylesheet in your web directory.
  3. Add a link to the stylesheet in the head of the document:
    <link href="carpe_slider.css"
  4. Add a script tag referencing the slider script at the end of the page just before the body end tag:
    <script src="carpe_slider.js"></script>
  5. Make sure you have a document type declaration at the top of your page to trigger strict mode in browsers:
    <!DOCTYPE html>
  6. You're done. Any input tag of type range will be displayed as a CARPE Slider:
    <input type="range"/>
  7. Read more and see examples on the documentation and test pages.

Licenses & Downloads

The pro version is for commercial use; Unlimited use within one company, domain, project or application, or for multiple client projects. There is additional functionality and options for customization, and no requirement to link back. Limited support and warranty is provided. The price is us $79, or equivalent in sek or eur for bank transfers. Payment can be done with PayPal, credit/debit card or bank transfer. The buyer gets the source code and minified code (including test, documentation and demo pages), an invoice for book keeping, and a pdf license document by e-mail and free minor upgrades. Please include contact information (and company name, contact person, domain name and vat number for European customers if applicable). Help with custom scripts and implementation is available for a fee. I may donate pro versions or give discounts if the cause is good. Send me an e-mail.

Buy the pro version:

The free version is for non-commercial and personal use and has a link to this page in the corner of the slider panel. The free version may also be used during development and testing of commercial projects. The code is protected by copyright, but free to use. It's not free to distribute (modified or not), but feel free to modify your copy to suit your needs. Help with custom scripts and implementation is available for a fee. Send me an e-mail.

Donate and/or download the free version: