Improve examples

documentation/examples-content/colorpicker.php

@@ -5,42 +5,23 @@
 
 	<div class="view">
 
-		<p>We'll initialize all sliders with the same options, and use the <code>slide</code> callback to keep to color in sync with the slider values. This callback fires when the slider is moved by sliding, or when it is clicked or tapped.</p>
+		<p>We'll initialize all sliders with the same options, and use the <code>update</code> callback to keep to color in sync with the slider values.</p>
+
+		<p>This callback fires any time a slider value updates.</p>
 
 		<div id="colorpicker">
 			<div class="sliders" id="red"></div>
 			<div class="sliders" id="green"></div>
 			<div class="sliders" id="blue"></div>
 
 			<div id="result"></div>
-			<?php run('colorpicker-setcolor'); ?>
 			<?php run('colorpicker-slider'); ?>
 		</div>
 	</div>
 
 	<div class="side">
 
-		<div class="viewer-header">The HTML</div>
-
-		<div class="viewer-content">
-
-<pre class="language-markup"><code>&lt;div id="colorpicker"&gt;
-	&lt;div class="sliders" id="red"&gt;&lt;/div&gt;
-	&lt;div class="sliders" id="green"&gt;&lt;/div&gt;
-	&lt;div class="sliders" id="blue"&gt;&lt;/div&gt;
-
-	&lt;div class="result"&gt;&lt;/div&gt;
-&lt;/div&gt;</code></pre>
-
-		</div>
-
-		<div class="viewer-header">The <code>setColor</code> function</div>
-
-		<div class="viewer-content">
-			<?php code('colorpicker-setcolor'); ?>
-		</div>
-
-		<div class="viewer-header">Initializing the slider</div>
+		<div class="viewer-header">Colorpicker</div>
 
 		<div class="viewer-content">
 			<?php code('colorpicker-slider'); ?>

documentation/examples-content/dates.php

@@ -5,12 +5,10 @@
 
 	<div class="view">
 
-		<p>As all dates in JavaScript can be represented as time, noUiSlider can handle them, too. This example will show you how to convert dates to numerical ranges, and then use the <code>update</code> event to display them in a pretty format.</p>
+		<p>This example shows how to convert dates to numerical ranges, and then use the <code>update</code> event to display them in a pretty format.</p>
 
 		<p>We'll be creating timestamps from strings. In order to do this easily, we'll define a new helper function. This function accepts a string, creates a <code>new Date</code> and then returns it as a timestamp.</p>
 
-		<p>In in overview below you'll find the code used to run this example. For readability, all <strong>helper</strong> functions have been moved into their own tab.</p>
-
 		<div class="example">
 			<div id="slider-date"></div>
 			<span class="example-val" id="event-start"></span>

documentation/examples-content/huge-numbers.php

@@ -5,11 +5,15 @@
 
 	<div class="view">
 
-		<p>If you are working with arbitrarily large numbers, you should <strong>not use these directly in noUiSlider</strong>, as you'll run into some JavaScript limitations. Instead, you should <strong>map</strong> your values to an <code>array</code>.</p>
+		<p>If you are working with arbitrarily large numbers, you should not use these directly in noUiSlider as you'll run into some JavaScript limitations. Instead, you should map your values to an array of string values.</p>
 
-		<p>Numbers is JavaScript are <a href="">Double Precision Floats</a>, which can store numbers up to 2^53 <em>(9007199254740992)</em> precisely. For reference, see <a href="http://stackoverflow.com/questions/15529337/prevent-javascript-number-function-from-rounding-big-numbers">this StackOverflow question</a>, or <a href="https://github.com/leongersen/noUiSlider/issues/427">issue #427 filed on GitHub</a>.</p>
+		<p>Numbers is JavaScript are "double precision floats", which can store numbers up to 2^53 <em>(9007199254740992)</em> precisely.</p>
+
+		<p>For reference, see <a href="http://stackoverflow.com/questions/15529337/prevent-javascript-number-function-from-rounding-big-numbers">this StackOverflow question</a>, or <a href="https://github.com/leongersen/noUiSlider/issues/427">issue #427 filed on GitHub</a>.</p>
 
-		<p>As an example, see the <code>'range'</code> option for a RAM selector offering 14 steps from 512MB to 8GB. The <code>'step'</code> are ommited for clarity. The values are provided as bytes. A better solution would be to abstract the byte values away from the slider, looking up the byte values in an array. This keeps the slider configuration simple and prevents issues with floating point precision.</p>
+		<p>As an example, see the <code>'range'</code> option for a RAM selector offering 14 steps from 512MB to 8GB. The <code>'step'</code> are omitted for clarity. The values are provided as bytes.</p>
+
+		<p>A better solution would be to abstract the byte values away from the slider, looking up the byte values in an array. This keeps the slider configuration simple and prevents issues with floating point precision.</p>
 
 		<p><em>(These values fit within the limit just fine, but demonstrate the point really well!)</em></p>
 

documentation/examples-content/keyboard.php

@@ -5,7 +5,7 @@
 
 	<div class="view">
 
-		<p>Much like the keypress example, handles can be made keyboard-focusable.</p>
+		<p>Handles can be focused, but noUiSlider does not offer keyboard support by default. It can be added by adding a <code>keypress</code> listener on a handle.</p>
 
 		<div class="example">
 			<input placeholder="Hit tab to focus on the handle." style="width: 100%">
@@ -29,11 +29,5 @@
 			<?php code('keyboard'); ?>
 		</div>
 
-		<div class="viewer-header">CSS</div>
-
-		<div class="viewer-content">
-			<?php loadShowCSS('keyboard'); ?>
-		</div>
-
 	</div>
 </section>

documentation/examples-content/keypress.php

@@ -1,15 +1,15 @@
 <?php sect('keypress'); ?>
-<h1>Changing the slider by keypress</h1>
+<h1>Changing the slider by key press</h1>
 
 <section>
 
 	<div class="view">
 
-		<p>To keep the library small, features like keyboard interaction haven't been included. However, adding features to input fields linked to a slider is easy. noUiSlider provides API's to help you. In this example, pressing the keyboard arrow keys will increase/decrease the slider by one step.</p>
+		<p>noUiSlider provides a <code>steps</code> API to determine the previous and next steps for a handle. In this example, pressing the keyboard arrow keys will increase/decrease the slider by one step.</p>
 
-		<p>This example uses the <code>'step'</code> API to determine by how much the slider should be changed. You don't need this function if your slider is linear. In that case, increase/decrease the value with the ammount of your <code>step</code>.</p>
+		<p>Use of this API is not necessary for linear sliders, as the step is constant in that case.</p>
 
-		<p>We'll listen to keydown on the <code>'#input-with-keypress'</code> element, and pass the event to a function so we can read the code that identifies the key.</p>
+		<p>We'll listen to keydown on the input element, and pass the event to a function so we can read the code that identifies the key.</p>
 
 		<p>Note that the slider value will be a <code>string</code>, so we'll need to parse it to an integer.</p>
 

documentation/examples-content/non-linear.php

@@ -5,7 +5,7 @@
 
 	<div class="view">
 
-		<p>One of noUiSlider's core features is the ability to divide the range in a non-linear fashion. Stepping can be applied. The example on the right shows where the handles are on the slider range in values and percentages.</p>
+		<p>One of noUiSlider's core features is the ability to divide the range in a non-linear fashion. Stepping can be applied. This example shows where the handles are on the slider range in values and percentages.</p>
 
 		<div class="example">
 			<div id="nonlinear"></div>

documentation/examples.php

@@ -6,6 +6,8 @@
 <section>
 	<ul>
 		<li><a href="#section-colorpicker">Color Picker</a></li>
+		<li><a href="#section-keyboard">Adding keyboard support</a></li>
+		<li><a href="#section-dates">Using dates</a></li>
 		<li><a href="#section-html5">Working with HTML5 input types</a></li>
 		<li><a href="#section-non-linear">Using non linear ranges</a></li>
 		<li><a href="#section-lock">Locking two sliders together</a></li>
@@ -15,14 +17,14 @@
 		<li><a href="#section-keypress">Changing the slider value by keypress</a></li>
 		<li><a href="#section-skipping">Skipping values on a slider</a></li>
 		<li><a href="#section-huge-numbers">Working with huge numbers</a></li>
-		<li><a href="#section-keyboard">Adding keyboard support</a></li>
-		<li><a href="#section-dates">Using dates</a></li>
 		<li><a href="#section-toggle">Create a toggle</a></li>
 		<li><a href="#section-soft-limits">Block the edges of a slider</a></li>
 	</ul>
 </section>
 
 <?php include 'examples-content/colorpicker.php'; ?>
+<?php include 'examples-content/keyboard.php'; ?>
+<?php include 'examples-content/dates.php'; ?>
 <?php include 'examples-content/html5.php'; ?>
 <?php include 'examples-content/non-linear.php'; ?>
 <?php include 'examples-content/lock.php'; ?>
@@ -32,7 +34,5 @@
 <?php include 'examples-content/keypress.php'; ?>
 <?php include 'examples-content/skipping.php'; ?>
 <?php include 'examples-content/huge-numbers.php'; ?>
-<?php include 'examples-content/keyboard.php'; ?>
-<?php include 'examples-content/dates.php'; ?>
 <?php include 'examples-content/toggle.php'; ?>
 <?php include 'examples-content/soft-limits.php'; ?>

documentation/examples/colorpicker-slider.js

@@ -1,9 +1,10 @@
-var resultElement = document.getElementById('result'),
-	sliders = document.getElementsByClassName('sliders');
+var resultElement = document.getElementById('result');
+var sliders = document.getElementsByClassName('sliders');
+var colors = [0,0,0];
 
-for ( var i = 0; i < sliders.length; i++ ) {
+[].slice.call(sliders).forEach(function( slider, index ){
 
-	noUiSlider.create(sliders[i], {
+	noUiSlider.create(slider, {
 		start: 127,
 		connect: [true, false],
 		orientation: "vertical",
@@ -15,8 +16,15 @@ for ( var i = 0; i < sliders.length; i++ ) {
 			decimals: 0
 		})
 	});
+
+	// Bind the color changing function to the update event.
+	slider.noUiSlider.on('update', function ( ) {
+
+		colors[index] = slider.noUiSlider.get();
+
+		var color = 'rgb(' + colors.join(',') + ')';
 
-	// Bind the color changing function
-	// to the slide event.
-	sliders[i].noUiSlider.on('slide', setColor);
-}
+		resultElement.style.background = color;
+		resultElement.style.color = color;
+	});
+});

documentation/examples/keyboard-slider.js

@@ -1,6 +1,6 @@
-var slider = document.getElementById('keyboard');
+var keyboardSlider = document.getElementById('keyboard');
 
-noUiSlider.create(slider, {
+noUiSlider.create(keyboardSlider, {
 	start: 10,
 	step: 10,
 	range: {

documentation/examples/keyboard.js

@@ -1,19 +1,14 @@
-var handle = slider.querySelector('.noUi-handle');
-
-handle.setAttribute('tabindex', 0);
-
-handle.addEventListener('click', function(){
-	this.focus();
-});
+var handle = keyboardSlider.querySelector('.noUi-handle');
 
 handle.addEventListener('keydown', function( e ) {
 
-	var value = Number( slider.noUiSlider.get() );
+	var value = Number( keyboardSlider.noUiSlider.get() );
+
+	if ( e.which === 37 ) {
+		keyboardSlider.noUiSlider.set( value - 10 );
+	}
 
-	switch ( e.which ) {
-		case 37: slider.noUiSlider.set( value - 10 );
-			break;
-		case 39: slider.noUiSlider.set( value + 10 );
-			break;
+	if ( e.which === 39 ) {
+		keyboardSlider.noUiSlider.set( value + 10 );
 	}
 });

documentation/examples/locked-crossupdate.js

@@ -6,7 +6,10 @@ function crossUpdate ( value, slider ) {
 
 	// Select whether to increase or decrease
 	// the other slider value.
-	var a = slider1 === slider ? 0 : 1, b = a ? 0 : 1;
+	var a = slider1 === slider ? 0 : 1;
+
+	// Invert a
+	var b = a ? 0 : 1;
 
 	// Offset the slider value.
 	value -= lockedValues[b] - lockedValues[a];

documentation/examples/locked-link.js

@@ -8,10 +8,6 @@ function setLockedValues ( ) {
 slider1.noUiSlider.on('change', setLockedValues);
 slider2.noUiSlider.on('change', setLockedValues);
 
-// The value will be send to the other slider,
-// using a custom function as the serialization
-// method. The function uses the global 'lockedState'
-// variable to decide whether the other slider is updated.
 slider1.noUiSlider.on('slide', function( values, handle ){
 	crossUpdate(values[handle], slider2);
 });

documentation/examples/locked-setup.js

@@ -1,15 +1,15 @@
-// Store the locked state and slider values.
-var lockedState = false,
-	lockedSlider = false,
-	lockedValues = [60, 80],
-	slider1 = document.getElementById('slider1'),
-	slider2 = document.getElementById('slider2'),
-	lockButton = document.getElementById('lockbutton'),
-	slider1Value = document.getElementById('slider1-span'),
-	slider2Value = document.getElementById('slider2-span');
+var lockedState = false;
+var lockedSlider = false;
+var lockedValues = [60, 80];
 
-// When the button is clicked, the locked
-// state is inverted.
+var slider1 = document.getElementById('slider1');
+var slider2 = document.getElementById('slider2');
+
+var lockButton = document.getElementById('lockbutton');
+var slider1Value = document.getElementById('slider1-span');
+var slider2Value = document.getElementById('slider2-span');
+
+// When the button is clicked, the locked state is inverted.
 lockButton.addEventListener('click', function(){
 	lockedState = !lockedState;
 	this.textContent = lockedState ? 'unlock' : 'lock';