diff options
| author | Yuval Adam <yuv.adm@gmail.com> | 2014-05-30 11:37:07 +0300 |
|---|---|---|
| committer | Yuval Adam <yuv.adm@gmail.com> | 2014-05-30 11:37:11 +0300 |
| commit | f9ea5d06f7eb768ce9ca2bb988a7a653b717b1e2 (patch) | |
| tree | 0d5fb7c0538fb2a64c3e3c94ae552f8ffb72a43e /templates/home.html | |
| parent | 3f7d8ca6fa74c5e93fa7c5910c0bad48ef847a16 (diff) | |
Add loop speed slider
Diffstat (limited to 'templates/home.html')
| -rw-r--r-- | templates/home.html | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/templates/home.html b/templates/home.html index e9b9f04..ece3574 100644 --- a/templates/home.html +++ b/templates/home.html @@ -4,10 +4,12 @@ <title>Light Loop Pi</title> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css"> + <link rel="stylesheet" href="/static/css/bootstrap-slider.css"/> <link rel="stylesheet" href="/static/css/main.css"/> <script src="/static/js/jquery-2.1.1.min.js"></script> <script src="/static/js/underscore-min.js"></script> <script src="/static/js/bootstrap.min.js"></script> + <script src="/static/js/bootstrap-slider.min.js"></script> <script> function get_data() { $.get('/data', function(res) { @@ -46,6 +48,12 @@ $('#tree-btns').append($('<button type="button" class="btn btn-default tree-btn" data-tree="' + i + '">Tree ' + i + '</button>')); }); + $('#ex1').slider({ + formater: function(value) { + return 'Current value: ' + value; + } + }); + $('.tree-btn').click(function() { var tree = $(this).attr('data-tree'); $('.light-tree').hide(); @@ -61,6 +69,12 @@ <body> <div class="container"> <h1>Light Loop Pi</h1> + + <div class="speed-slider"> + <label>Loop speed:</label> + <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="500" data-slider-max="5000" data-slider-step="100" data-slider-value="1000"/> + </div> + <div class="btn-toolbar" role="toolbar"> <div id="tree-btns" class="btn-group"></div> <div class="btn-group"> |