mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
45 lines
No EOL
1.8 KiB
HTML
Executable file
45 lines
No EOL
1.8 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Forms</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Slider</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<form action="#" method="get">
|
|
|
|
<h2>Sliders</h2>
|
|
<p>To add a slider widget to your page, start with an <code>input</code> with a new HTML5 <code>type="range"</code> attribute. Specify the <code>value</code> (current value), <code>min</code> and <code>max</code> attribute values to configure the slider. The framework will parse these attributes to configure the slider. </p>
|
|
<p>As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated and wrap them in a <code>div</code> with the <code>data-role="fieldcontain"</code> attribute to group them.</p>
|
|
|
|
<pre><code>
|
|
<div data-role="fieldcontain">
|
|
<label for="slider">Input slider:</label>
|
|
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>The slider and input is displayed like this:</p>
|
|
<div data-role="fieldcontain">
|
|
<label for="slider">Input slider:</label>
|
|
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |