Skip to content

Instantly share code, notes, and snippets.

@dzwarg

dzwarg/gist:2423989

Created April 19, 2012 20:37
Show Gist options
  • Save dzwarg/2423989 to your computer and use it in GitHub Desktop.
Save dzwarg/2423989 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. David Zwarg revised this gist Apr 25, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -36,6 +36,8 @@
    var max = parseInt($('input:last').val(),10);
    $('.sliderbar').noUiSlider('move',{setTo:[min,max]});
    });
    $('#min').text($('.sliderbar').noUiSlider('getValue')[0]);
    $('#max').text($('.sliderbar').noUiSlider('getValue')[1]);
    });
    </script>
    </head>
    @@ -47,6 +49,8 @@
    <div style="display:none;">
    noUiSlider label
    <div class="sliderbar" style="width: 85%;"></div>
    </div>
    <div>
    <span id="min"></span> to <span id="max"></span>
    </div>
    </div>
  2. David Zwarg created this gist Apr 19, 2012.
    62 changes: 62 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>noUiSlider move bug.</title>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="nouislider.css"/>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
    <script type="text/javascript" src="jquery.nouislider.js"></script>
    <script type="text/javascript">
    $(function(){
    var viz = false;
    $('.btn').button().click(function(evt){
    if (viz) {
    $(this).next().hide();
    viz = false;
    }
    else {
    $(this).next().show();
    viz = true;
    }
    });
    $('.sliderbar').noUiSlider('init',{
    scale:[0,2400],
    startMin:0,
    startMax:2400,
    change: function(){
    var vals = $('.sliderbar').noUiSlider('getValue');
    $('#min').text(vals[0]);
    $('#max').text(vals[1]);
    }
    });
    $('input[type="text"]').blur(function(){
    var min = parseInt($('input:first').val(),10);
    var max = parseInt($('input:last').val(),10);
    $('.sliderbar').noUiSlider('move',{setTo:[min,max]});
    });
    });
    </script>
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="span3">
    <button class="btn">Button</button>
    <div style="display:none;">
    noUiSlider label
    <div class="sliderbar" style="width: 85%;"></div>
    <span id="min"></span> to <span id="max"></span>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="span2">
    <input type="text" class="span1" value="0"/>
    <input type="text" class="span1" value="2400"/>
    </div>
    </div>
    </div>
    </body>
    </html>