CARPE Slider v3.0

Test Page

This page contains a mix of sliders and their respective mark-up. Use it for testing behaviour, functionality or styling with the default script and stylesheet, or with your custom stylesheets or coexisting scripts.

Learn all about the CARPE Slider on the documentation page, or go back to the main page.

<input type="range"/>

<input type="range" disabled="disabled"/>

<input type="range" data-carpe-slider="no"/>

<input type="range" value="100" style="width: 300px;" data-carpe-decimals="3"/>

<input type="range" tabindex="1" data-carpe-decimals="0"/>

<input type="range" autofocus="autofocus" class="vertical" data-carpe-decimals="0"/>

<input type="range"
    data-carpe-targets="input-display-1" data-carpe-decimals="0"/>

<input id="input-display-1" type="text"/>

<input type="range"
    data-carpe-targets="span-display-1"
    data-carpe-decimals="0"/>

<span id="span-display-1"></span>

<input type="range" min="50" max="-50"
    data-carpe-targets="span-display-2"
    data-carpe-decimals="0"/>

<span id="span-display-2"></span>

<input type="range" step="-1"
    data-carpe-targets="span-display-3"
    data-carpe-decimals="0"/>

<span id="span-display-3"></span>

<input type="range" min="50"
    max="-50" step="-5"
    data-carpe-targets="span-display-4"
    data-carpe-decimals="0"/>

<span id="span-display-4"></span>

<input type="range" class="vertical" step="-5"
    data-carpe-targets="span-display-5"
    data-carpe-decimals="0"/>

<span id="span-display-5"></span>