</div>
<div class="viewer-header">Updating the slider with new options on <code>button</code> click</div>
<div class="viewer-content">
<?php
code('update');
?>
</div>
</div>
</section>
<?php
sect('styling');
?>
<h2>Styling</h2>
<section>
<div class="view">
<p>Styling noUiSlider is easy. The default stylesheet contains helpful comments to get a head start. I <strong>strongly</strong> recommend using the default stylesheet as a starting point when re-styling noUiSlider.</p>
<h3>Things to watch out for</h3>
<ul style="margin: 20px">
<li>If you want the handles to stay within the slider bar (instead of the default overlap), have a look at the CSS detailed to the right. Add the styles to your stylesheet and give your element the <code>noUi-extended</code> class for this effect.</li>
<li>The <code>.noUi-connect</code> and <code>.noUi-background</code> classes are applied to various elements.</a>
<li>To position your handles on the center of its relative position, it should have a <strong>negative offset</strong> of half the handle width. See the default theme for reference.</li>
</ul>
<div><code>false</code>, <code>true</code>, <code><em>formatter</em></code>, <code>array[<em>formatter</em> or false]</code></div>
</div>
</div>
<div class="side">
<?php
code('tooltips');
?>
</div>
</section>
<?php
sect('animate');
?>
<h2>Animate</h2>
<section>
<div class="view">
<p>Set the animate option to <code>false</code> to prevent the slider from animating to a new value with when calling <code>.val()</code>.</p>
<div class="example" style="margin: 0; padding-bottom: 20px">
<div class="sliders" id="slider-animate-true"></div>
<button id="set-sliders">Set sliders</button>
</div>
<div class="example" style="margin: 0;">
<p>Putting all your scripts in the page <code><head></code> will slow down your site. If you'd like to know why, consider reading <a href="http://developer.yahoo.com/performance/rules.html#js_bottom">this article by Yahoo!</a>. Put the slider CSS in your <code><head></code>, and the script at the end of the <code><body></code>.</p>
<p>To create a slider, call <code>noUiSlider.create()</code> with an element and your options.</p>
</div>
<div class="side">
<pre class="language-markup"><code><!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">
<!-- In <body> -->
<script src="nouislider.min.js"></script></code></pre>
</div>
</section>
<?php
sect('browser-support');
?>
<h2>Browser support</h2>
<section>
<div class="view">
<p>noUiSlider supports <strong>IE9 and up</strong>, and the latest versions of the <em>'evergreen'</em> browsers: <strong>Chrome</strong>, <strong>Safari</strong>, <strong>Firefox</strong> and <strong>Opera</strong>.</p>
</div>
</section>
?>
</div>
<div class="viewer-header">Example tooltip styling</div>
<div class="viewer-content">
<?php
loadShowCSS('tooltip');
?>
</div>
</div>
</section>
<?php
sect('soft-limits');
?>
<h1>Soft limits</h1>
<section>
<div class="view">
<p>If you want to disable the edges of a slider, the set event can be used to reset the value if a limit is passed. Note how the handle 'bounces back' when it is released below <code>20</code> or above <code>80</code>. noUiSlider doesn't support disabling edges altogether, but this effect might be created visually by <a href="/nouislider/more#section-styling">setting padding</a> on the slider.</p>
<div class="example">
<div id="soft"></div>
<?php
run('slider-soft-setup');
?>
<?php
<p>This event is useful when you want to update a value or perform an actions every time a handle is dragged. For example, you can use the <code>'slide'</code> event to update graphs. For convenience, this function also fires on a change by 'tap'.</p>
</div>
</section>
<?php
sect('set');
?>
<h2>Set</h2>
<section>
<div class="view">
<p>Whenever a slider is changed to a new value, this event is fired. This function will trigger every time a slider <em>stops</em> changing, <strong>including</strong> after calls to the <code>.val()</code> method. You can consider this 'end of slide'.</p>
</div>
</section>
<?php
sect('change');
?>
<h2>Change</h2>
<section>
<div class="view">
<p>This event is similar to the <code>change</code> events on regular <code><input></code> elements. It fires when a user <em>stops</em> sliding, or when a slider value is changed by 'tap'.</p>
</div>
</section>
</div>
</div>
<div class="side">
<?php
code('count');
?>
<?php
code('count-stepped');
?>
</div>
</section>
<?php
sect('values');
?>
<h2>Values</h2>
<section>
<div class="view">
<p>The <code>values</code> mode is similar to <code>positions</code>, but it accepts values instead of percentages. The <code>stepped</code> option can be used for this mode.</p>
<div class="example">
<div id="pips-values"></div>
<?php
run('values');
?>
</div>
<?php
run('snap');
?>
</div>
</div>
<div class="side">
<?php
code('snap');
?>
</div>
</section>
<?php
sect('combined');
?>
<h2>Combined options</h2>
<section>
<div class="view">
<p>Most <code>'behaviour'</code> flags can be combined.</p>
<div class="example">
<div id="combined"></div>
<?php
run('combined');
?>
</div>
</div>
code('non-linear-step');
?>
<div class="viewer-header">Display the slider value</div>
<div class="viewer-content">
<?php
code('non-linear-step-link');
?>
</div>
</div>
</section>
<?php
sect('snap');
?>
<h3>Snapping between steps</h3>
<section>
<div class="view">
<p>When a non-linear slider has been configured, the <code>snap</code> option can be set to <code>true</code> to force the slider to jump between the specified values.</p>
<div class="example">
<div id="slider-snap"></div>
<span class="example-val" id="slider-snap-value-lower"></span>
<span class="example-val" id="slider-snap-value-upper"></span>
<?php
run('snap');
?>
?>
<div class="viewer-header">Handling button presses</div>
<div class="viewer-content">
<?php
code('buttons');
?>
</div>
</div>
</section>
<?php
sect('formatting');
?>
<h2>Number formatting</h2>
<section>
<div class="view">
<p>To format the slider output, noUiSlider offers a <code>format</code> option. Simply specify <code>to</code> and <code>from</code> functions to encode and decode the values. See <em>manual formatting</em> to the right for usage information.</p>
<p>By default, noUiSlider will format output with <strong>2 decimals</strong>.</p>
<p>Manual formatting can be very tedious, so noUiSlider has support for <a href="/wnumb">the wNumb formatting library</a>. wNumb offers a wide range of options and provides number validation.</p>
<div class="example">
<div id="slider-format"></div>
