Forked from: akirachi5731's forked: スライダー View Diff (1) forked: スライダー akirachi5731 Follow 2015-11-09 12:05:30 License: MIT License Fork0 Fav0 View396 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 33 lines HTML 11 lines CSS 77 lines forked: スライダー // forked from akirachi5731's "forked: スライダー" http://jsdo.it/akirachi5731/yJlE // forked from monakaz's "スライダー" http://jsdo.it/monakaz/aio_slider /*********************** * UI view functions ***********************/ $(function(){ $("#slider").change(function(event){ var val = $(this).val(); $("#value").html(("00"+val).slice(-3)); $("#pane").css({height: val + "%"}); }); /*var test=1; $("#slider").tap(function(){ $("#value2").html(test++); });*/ }); /************************************** * extend zepto for tap event handler * ref - http://zeptojs.com * #Creating plug-ins **************************************/ (function($){ $.extend($.fn, { tap: function(fn){ this.on("touchend", fn); return this; } }) })(Zepto); <div id="pane"></div> <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/> <div id="value">000</div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> forked: スライダー * { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #FFF; } body { background: #34495e; text-align: center; } #slider { margin-top: 200px; width: 260px; } #value { font-size: 100px; margin: 20px; } #pane { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #f1c40f; z-index: -1; } input[type="range"] { -webkit-appearance: none; outline: none; width: 250px; height: 10px; border-radius: 10px; position: relative; background-color: rgba(0, 0, 0, .8); border: 0; cursor: pointer; margin-top: 20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 100%; background: #E74C3C; } input[type="range"]::-webkit-slider-thumb:hover { background: #C0392B; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } input.bigslider-in { width: 200px; height: 60px; border-radius: 60px; } input.bigslider-in::-webkit-slider-thumb { width: 60px; height: 60px; } // forked from akirachi5731's "forked: スライダー" http://jsdo.it/akirachi5731/yJlE // forked from monakaz's "スライダー" http://jsdo.it/monakaz/aio_slider /*********************** * UI view functions ***********************/ $(function(){ $("#slider").change(function(event){ var val = $(this).val(); $("#value").html(("00"+val).slice(-3)); $("#pane").css({height: val + "%"}); }); /*var test=1; $("#slider").tap(function(){ $("#value2").html(test++); });*/ }); /************************************** * extend zepto for tap event handler * ref - http://zeptojs.com * #Creating plug-ins **************************************/ (function($){ $.extend($.fn, { tap: function(fn){ this.on("touchend", fn); return this; } }) })(Zepto); <div id="pane"></div> <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/> <div id="value">000</div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> * { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #FFF; } body { background: #34495e; text-align: center; } #slider { margin-top: 200px; width: 260px; } #value { font-size: 100px; margin: 20px; } #pane { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #f1c40f; z-index: -1; } input[type="range"] { -webkit-appearance: none; outline: none; width: 250px; height: 10px; border-radius: 10px; position: relative; background-color: rgba(0, 0, 0, .8); border: 0; cursor: pointer; margin-top: 20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 100%; background: #E74C3C; } input[type="range"]::-webkit-slider-thumb:hover { background: #C0392B; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } input.bigslider-in { width: 200px; height: 60px; border-radius: 60px; } input.bigslider-in::-webkit-slider-thumb { width: 60px; height: 60px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author akirachi5731 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/Qccd/js"></script> application html5_elements&api slider Discussion Questions on this code? Tags application html5_elements&api slider
