How to make a Theme Slider using jQuery Mobile ? Last Updated : 17 Dec, 2020 Comments Improve Suggest changes Like Article Like Report jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Theme Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” /> <script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script> <script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script> Example: We will create a Basic slider using jQuery Mobile. Slider is an input type to insert data using slider. We use type="range" attribute with <input> element to create a Slider. Also, use data-track-theme="b" and data-theme="b" attribute to set the theme. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> <script src= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <center> <h1>GeeksforGeeks</h1> <h4> Design a Theme Slider using jQuery Mobile </h4> <form style="width: 50%;"> <label for="slider"> Theme Slider: </label> <input type="range" name="slider" id="slider" data-track-theme="b" data-theme="b" min="0" max="100" value="50"> </form> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make a Theme Slider using jQuery Mobile ? P ppatelkap Follow Improve Article Tags : Web Technologies JQuery jQuery-Misc jQuery-Mobile Similar Reads How to make Theme collapsibles using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Theme collapsible using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel="stylesheet" 1 min read How to make a Slider tooltip extension using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Slider tooltip extension using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€style 1 min read How to make Basic Navbar using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic navbar using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hr 1 min read How to make Form element Rangeslider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Form element Rangeslider using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="st 1 min read How to make Basic toolbars using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic toolbars using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" 1 min read How to create a Mini sized Slider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Mini sized Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†1 min read How to create a Basic Slider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Basic Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href= 1 min read How to create Form element Themed Range slider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Form element Themed Range slider using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link 1 min read How to make Form element Mini Range slider using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Form element Mini Range slider using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link r 1 min read How to create a Slider with hidden Label using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Slider with hidden Label using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€style 1 min read Like