Slider

Description

A slider allows users to select a value between a minimum and maximum range.

Example


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
<meta name="viewport"
  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!--  www.  jav  a  2s  .co  m-->
<body>

  <div data-role="page" data-theme="b">
    <div data-role="header">
      <h1>Slider</h1>
    </div>

    <div data-role="content">
      <form id="test" id="test" action="#" method="post">
        <a href="#" id="create-s1" data-role="button">Create slider1</a> 
        <a href="#" id="create-s2" data-role="button">Create slider2</a> <br>

        <p style="text-align: center;">
          <strong>Invoke methods:</strong>
        </p>
        <a href="#" id="auto" data-role="button" data-theme="a">Set
          Brightness to 100%</a> 
        <a href="#" id="disable" data-role="button"
          data-theme="a">Disable Brightness</a> 
        <a href="#" id="enable"
          data-role="button" data-theme="a">Enable Brightness</a>
      </form>
    </div>
    <script type="text/javascript">
    $( "#create-s1" ).bind( "click", function() {
      $( '<label for="brightness1">Brightness1:</label><input type="range" name="brightness1" id="brightness1" min="0" max="10" data-track-theme="a" data-theme="d" />' )
        .insertAfter( "#create-s1" );
      $( "#brightness1" ).slider().textinput();
    });
    
    $( "#create-s2" ).bind( "click", function() {
      $( '<label for="brightness2">Brightness2:</label><input type="range" name="brightness2" id="brightness2" min="0" max="10" />' )
        .insertAfter( "#create-s2" );
      $( "#brightness2" ).slider({
          theme: "d",
          trackTheme: "a",
          disabled: false,
          create: function(event) { 
            console.log( "Creating slider control..." );
          }
        }).textinput();
    });
    
    $( "#auto" ).bind( "click", function() {
      $( "#brightness1" ).val( 10 ).slider( "refresh" );
    });
    
    $( "#disable" ).bind( "click", function() {
      $( "#brightness1" ).slider( "disable" );
    });

    $( "#enable" ).bind( "click", function() {
      $( "#brightness1" ).slider( "enable" );
    });  
  </script>
  </div>

</body>
</html>

Click to view the demo

Theme

A slider consists of two themeable components. There is the foreground component known as the slider and the background component known as the track. Each of these components can be themed separately.

To theme the slider, add the data-theme="a" attribute to the input element.

To theme the track, add the data-track-theme="a" attribute to the input element:


<input type="range" name="brightness" 
       id="brightness"  
       min="0"  
       max="10"  
       data-theme="b" 
       data-track-theme="a"  />

Slider

Description

Example

Theme

jQuery_Mobile

Form

List

Layout

Theme