index.html

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">

<link rel="stylesheet" href="build/build.css" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
    html, body { margin: 0; padding: 0; height: 100%; }
    select { width: 100px; display: block; top: 50%; margin-top: -15px; }
    .select-switch, select { position: relative; margin: 0 auto; top: 50%; margin-top: -15px; }
    footer { position: absolute; bottom: 0; width: 100%; text-align: center; }
    footer small{ margin-top: 70px; margin-bottom: 70px; font-size: .9em; display: block; font-family: monospace; text-align: center; color: hsl(0, 0%, 40%); }
    footer small a{ text-decoration: none; font-weight: bold; color: hsl(0, 0%, 20%); }
</style>


<select>
    <option value="0">Public</option>
    <option value="1" selected=selected>Private</option>
    <option value="2">Draft</option>
    <option value="3">Scheduled</option>
</select>

<footer>
  <small>by <a href="http://mnmly.com" target="_blank">mnmly</a> / grab it on <a href="http://github.com/mnmly/select-switch/">github</a></small>
</footer>

<script src="build/build.js"></script>
<script type="text/javascript" charset="utf-8">

    var $            = require( 'component-jquery' ),
        SelectSwitch = require( 'select-switch' );
    
    $(function(){
        window.selectSwitch = new SelectSwitch( $('select'), 21 );
    });
</script>