jquery-mobile/docs/forms/forms-slider.html

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8" /> 
	<title>jQuery Mobile Docs - Forms</title> 
	<link rel="stylesheet"  href="../../themes/default" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script type="text/javascript" src="../../js/"></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>	
&lt;div data-role=&quot;fieldcontain&quot;&gt;
	&lt;label for=&quot;slider&quot;&gt;Input slider:&lt;/label&gt;
 	&lt;input type=&quot;range&quot; name=&quot;slider&quot; id=&quot;slider&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
&lt;/div&gt;
</code></pre>	
			 
			<p>An example of a 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" data-theme="b" data-track-theme="a"  />
			</div>

			<p>By setting the <code>min</code> and <code>max</code>attributes you can configure the allowable number range of the slider track. The <code>value</code> of the input is used to configure the starting position of the handle and the value populated in the text input.</p>
	
			<p>The slider with a min of 500, max of 5,000 and initial value of 2,500</p>
			<div data-role="fieldcontain">
				<label for="slider">Input slider:</label>
			 	<input type="range" name="slider" id="slider" value="2500" min="500" max="5000"  />
			</div>
	
	</form>
	
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new forms docs 2010-10-14 21:41:38 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
			`<meta charset="utf-8" />`
new forms docs 2010-10-14 21:41:38 +00:00			`<title>jQuery Mobile Docs - Forms</title>`
Added link to demo css file to all docs pages 2010-11-11 19:15:42 +00:00			`<link rel="stylesheet" href="../../themes/default" />`
			`<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>`
removed js/all redirect. updated files to use js/ 2010-11-09 22:57:26 +00:00			`<script type="text/javascript" src="../../js/"></script>`
new forms docs 2010-10-14 21:41:38 +00:00			`<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>`

Added an example of a slider with a min of 500, max of 5,000 and value of 2,500 to test and demonstrate a slider that isn't 1-100. 2010-11-03 17:50:43 +00:00			`<p>An example of a slider and input is displayed like this:</p>`
new forms docs 2010-10-14 21:41:38 +00:00			`<div data-role="fieldcontain">`
			`<label for="slider">Input slider:</label>`
changed theme 2010-11-11 04:42:08 +00:00			`<input type="range" name="slider" id="slider" value="0" min="0" max="100" data-theme="b" data-track-theme="a" />`
new forms docs 2010-10-14 21:41:38 +00:00			`</div>`

fixed typo 2010-11-03 18:36:08 +00:00			`<p>By setting the <code>min</code> and <code>max</code>attributes you can configure the allowable number range of the slider track. The <code>value</code> of the input is used to configure the starting position of the handle and the value populated in the text input.</p>`
Added an example of a slider with a min of 500, max of 5,000 and value of 2,500 to test and demonstrate a slider that isn't 1-100. 2010-11-03 17:50:43 +00:00
			`<p>The slider with a min of 500, max of 5,000 and initial value of 2,500</p>`
			`<div data-role="fieldcontain">`
			`<label for="slider">Input slider:</label>`
			`<input type="range" name="slider" id="slider" value="2500" min="500" max="5000" />`
			`</div>`
new forms docs 2010-10-14 21:41:38 +00:00
			`</form>`

			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`