<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Colorpicker Demo</title>
+ <title>jQuery UI Slider - Colorpicker</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description" style="clear:left;">
-<p>
-This example shows how easy it is to put together three sliders to make a simple RGB colorpicker.
-</p>
+<p>Combine three sliders to create a simple RGB colorpicker.</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Default Demo</title>
+ <title>jQuery UI Slider - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-The default slider has a single handle and is horizontal. The handle can be moved with the mouse or by using the arrow keys.
-</p>
+<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
<div class="demos-nav">
<h4>Examples</h4>
<ul>
- <li class="demo-config-on"><a href="default.html">Default Slider</a></li>
- <li><a href="steps.html">Snap to every 50 steps</a></li>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ <li><a href="steps.html">Snap to increments</a></li>
<li><a href="range.html">Range slider</a></li>
- <li><a href="rangemin.html">Range with fixed min</a></li>
- <li><a href="rangemax.html">Range with fixed max</a></li>
- <li><a href="slider_vertical.html">Vertical single slider</a></li>
+ <li><a href="rangemin.html">Range with fixed minimum</a></li>
+ <li><a href="rangemax.html">Range with fixed maximum</a></li>
+ <li><a href="slider_vertical.html">Vertical slider</a></li>
<li><a href="range_vertical.html">Vertical range slider</a></li>
- <li><a href="multiple_vertical.html">Multiple vertical sliders</a></li>
+ <li><a href="multiple_vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side_scroll.html">Simple scrollbar</a></li>
</ul>
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Multiple Vertical Sliders Demo</title>
+ <title>jQuery UI Slider - Multiple sliders</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description" style="clear:left;">
-<p>
-This example shows how easy it is to add multiple sliders to a page, each with their own options, to make a UI for a music player.
-</p>
+<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Demo</title>
+ <title>jQuery UI Slider - Range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected.
-This is created by setting the range option:
-</p>
-
-<pre><code>range: true
-</code></pre>
+<p>Set the <strong>range</strong> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Vertical Range Demo</title>
+ <title>jQuery UI Slider - Vertical range slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-This is an example of a vertical range slider created by setting the orientation to vertical:
-</p>
-
-<pre><code>orientation: "vertical",
-range: true,
-values: [17, 67]
-</code></pre>
-
-<p>
-It's important to note that a vertical slider needs a height set.
-You can do this via <code>.height()</code> or by setting the height through CSS.
-</p>
-
-<p>
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
-</p>
+<p>Change the orientation of the range slider to vertical. Assign a height value via <strong>.height()</strong> or by setting the height through CSS, and set the <strong>orientation</strong> option to "vertical."</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Max Demo</title>
+ <title>jQuery UI Slider - Range with fixed maximum</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider.
-This makes it clear that selecting a value will also include all values above the selection.
-This is a range option type:
-</p>
-
-<pre><code>range: "max"
-</code></pre>
-
-<p>
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
-</p>
+<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <strong>range</strong> option to "max."</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Range Min Demo</title>
+ <title>jQuery UI Slider - Range with fixed minimum</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider.
-This makes it clear that selecting a value will also include all values below the selection.
-This is a range option type:
-</p>
-
-<pre><code>range: "min"
-</code></pre>
-
-<p>
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
-</p>
+<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <strong>range</strong> option to "min."</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Default Demo</title>
+ <title>jQuery UI Slider - Slider scrollbar</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-Example of how a slider can be used to manipulate the positioning of content on the page. In this case, it acts as a scrollbar.
-</p>
+<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Vertical Single Slider Demo</title>
+ <title>jQuery UI Slider - Vertical slider</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-This is an example of a minimum range vertical slider created by setting the orientation to vertical:
-</p>
-
-<pre><code>orientation: "vertical"
-</code></pre>
-
-<p>
-It's important to note that a vertical slider needs a height set.
-You can do this via <code>.height()</code> or by setting the height through CSS.
-</p>
-
-<p>
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
-</p>
+<p>Change the orientation of the slider to vertical. Assign a height value via <strong>.height()</strong> or by setting the height through CSS, and set the <strong>orientation</strong> option to "vertical."</p>
</div><!-- End demo-description -->
<!doctype html>
<html lang="en">
<head>
- <title>jQuery UI Slider - Steps Demo</title>
+ <title>jQuery UI Slider - Snap to increments</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<div class="demo-description">
-<p>
-This slider has a step value set that will only allow for increments of 50 to be selected.
-The default step increment is 1.
-The drag handle will snap to drop points every 50 units.
-This is set in an option called step:
-</p>
-
-<pre><code>min: 0,
-max: 500,
-step: 50
-</code></pre>
-
-<p>
-This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.
-</p>
+<p>Increment slider values with the <strong>step</strong> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
</div><!-- End demo-description -->
projects / jquery-ui.git / commitdiff