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.
Features
- Cross-browser & cross-plattform.
- Support for touch, mouse & keyboard devices.
- html5 & xhtml compatible.
- Stylable with css 1-3.
- Customizable behavior.
- No dependencies.
- Light footprint. 6 kB minified and compressed.
- Non-intrusive and validating mark-up.
- No image files needed.
- No programming skills needed.
- Progressive enhancement.
- Graceful degradation with JavaScript disabled.
- No native object manipulation.
- No global namespace pollution.
News
- New default stylesheet. [v3.0]
- css3 enhancements for modern browsers. [v3.0]
- Cleaner and more compact code. [v3.0]
- Performance improvements. [v3.0]
- Reset function with delete key or double-click. [v3.0]
- Improved cross-browser compatibility. [v3.0]
- Improved integration with form events. [v3.0]
- No global namespace pollution. [v3.0]
- CARPE link with help text in free version. [v3.0]
- Optional custom link/button in pro version. [v3.0]
- Improved integration with slider target. [v2.*, v3.0]
- Minimal and less intrusive mark-up. [v2.*, v3.0]
- Support for touch devices. [v2.0.8]
- Keyboard control. [v2.0]
Get started
- Download the free or the pro version below.
- Place the script file and the stylesheet in your web directory.
- Add a link to the stylesheet in the head of the document:
<link href="carpe_slider.css"
rel="stylesheet"/> - 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>
- Make sure you have a document type declaration at the top of your page to trigger strict mode in browsers:
<!DOCTYPE html>
- You're done. Any input tag of type range will be displayed as a CARPE Slider:
<input type="range"/>
- 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: carpe.slider.free.zip