Multitoggle

Present radio buttons as a multi-way switch or slider, using styling similar to Bootstrap switches.

<div class="multitoggle">
    <div class="multitoggle-switch">
        <input type="radio" name="example-1" value="false" id="example-1-1" class="multitoggle-off"/>
        <label class="toggle" for="example-1-1"></label>
        <input type="radio" name="example-1" value="middle-1" id="example-1-2"/>
        <label class="toggle" for="example-1-2"></label>
        <input type="radio" name="example-1" value="middle-2" id="example-1-3"/>
        <label class="toggle" for="example-1-3"></label>
        <input type="radio" name="example-1" value="true" id="example-1-4" checked="checked" class="multitoggle-on"/>
        <label class="toggle" for="example-1-4"></label>
    </div>
    <label class="multitoggle-label">False</label>
    <label class="multitoggle-label">Maybe</label>
    <label class="multitoggle-label">Mayyyybe</label>
    <label class="multitoggle-label">True</label>
</div>

Disabled toggles

Sliders

Use .multitoggle-slider to add the slider line, and .multitoggle-slider-bare to remove the border

Disabled sliders

<div class="multitoggle">
    <div class="multitoggle-switch multitoggle-slider multitoggle-slider-bare">
        <input type="radio" name="example-4" value="1" id="example-4-1" disabled="disabled"/>
        <label class="toggle" for="example-4-1"></label>
        <input type="radio" name="example-4" value="2" id="example-4-2" disabled="disabled"/>
        <label class="toggle" for="example-4-2"></label>
        <input type="radio" name="example-4" value="3" id="example-4-3" disabled="disabled"/>
        <label class="toggle" for="example-4-3"></label>
        <input type="radio" name="example-4" value="4" id="example-4-4" disabled="disabled"/>
        <label class="toggle" for="example-4-4"></label>
        <input type="radio" name="example-4" value="5" id="example-4-5" disabled="disabled" checked="checked" class="multitoggle-on"/>
        <label class="toggle" for="example-4-5"></label>
    </div>
    <label class="multitoggle-label">1</label>
    <label class="multitoggle-label">2</label>
    <label class="multitoggle-label">3</label>
    <label class="multitoggle-label">4</label>
    <label class="multitoggle-label">5</label>
</div>