Example optimizations

Author: andreruffert

example/index.html

@@ -42,14 +42,23 @@ <h2>Comparison to native element</h2>
     <br>
 
     <div>
-        <h2>Negative example</h2>
+        <h2>Negative attributes</h2>
         <input type="range" min="-20" max="20" data-rangeslider>
         <output></output>
     </div>
 
     <br>
     <br>
 
+    <div>
+        <h2>Floating point boundaries</h2>
+        <input type="range" min="10" max="11" step="0.1" value="10.2" data-rangeslider>
+        <output></output>
+    </div>
+
+    <br>
+    <br>
+
     <div>
         <h2><code>value="0"</code></h2>
         <input type="range" value="0" data-rangeslider>
@@ -80,15 +89,6 @@ <h2>Programmatic value changes</h2>
     <br>
     <br>
 
-    <div>
-        <h2>Floating point boundaries</h2>
-        <input type="range" min="10" max="11" step="0.1" value="10.2" data-rangeslider>
-        <output></output>
-    </div>
-
-    <br>
-    <br>
-
     <div id="js-example-destroy">
         <h2>Destroy a plugin instance</h2>
         <input type="range" min="10" max="1000" step="10" value="500" data-rangeslider>
@@ -100,51 +100,53 @@ <h2>Destroy a plugin instance</h2>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="../dist/rangeslider.min.js"></script>
     <script>
-        $(function() {
-
-            var $document   = $(document),
-                selector    = '[data-rangeslider]',
-                $input      = $(selector);
+    $(function() {
 
-            $document.on('change', 'input[type="range"]', function(e) {
-                var value = e.target.value,
-                    output = e.target.parentNode.getElementsByTagName('output')[0];
-                output.innerHTML = value;
-            });
+        var $document   = $(document),
+            selector    = '[data-rangeslider]',
+            $input      = $(selector);
 
-            $input.rangeslider({
-
-                // Deactivate the feature detection
-                polyfill: false,
+        // Example functionality to demonstrate a value feedback
+        $document.on('change', 'input[type="range"]', function(e) {
+            var value = e.target.value,
+                output = e.target.parentNode.getElementsByTagName('output')[0];
+            output.innerHTML = value;
+        });
 
-                // Callback function
-                onInit: function() {},
+        // Example functionality to demonstrate programmatic value changes
+        $document.on('click', '#js-example-change-value button', function(e) {
+            var $inputRange = $('input[type="range"]', e.target.parentNode),
+                value = $('input[type="number"]', e.target.parentNode)[0].value;
 
-                // Callback function
-                onSlide: function(position, value) {},
+            $inputRange.val(value).change();
+        });
 
-                // Callback function
-                onSlideEnd: function(position) {}
+        // Example functionality to demonstrate destroy functionality
+        $document
+            .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
+                $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
+            })
+            .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
+                $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
             });
 
-            // Example functionality to demonstrate programmatic value changes
-            $document.on('click', '#js-example-change-value button', function(e) {
-                var $inputRange = $('input[type="range"]', e.target.parentNode),
-                    value = $('input[type="number"]', e.target.parentNode)[0].value;
+        // Basic rangeslider initialization
+        $input.rangeslider({
 
-                $inputRange.val(value).change();
-            });
+            // Deactivate the feature detection
+            polyfill: false,
+
+            // Callback function
+            onInit: function() {},
 
-            // Example functionality to demonstrate destroy functionality
-            $document
-                .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
-                    $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
-                })
-                .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
-                    $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
-                });
+            // Callback function
+            onSlide: function(position, value) {},
 
+            // Callback function
+            onSlideEnd: function(position) {}
         });
+
+    });
     </script>
 </body>
 </html>