How to create a Fieldcontain mini sized using jQuery Mobile ?

How to create a Fieldcontain, mini sized Slider using jQuery Mobile ?

Last Updated : 17 Dec, 2020

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 Fieldcontain, mini-sized 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 Fieldcontain, mini sized Slider using jQuery Mobile. The slider is an input type to insert data using the slider. We use type="range" attribute with <input> element to create a slider.

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 Fieldcontain, mini sized 
            Slider using jQuery Mobile
        </h4>

        <form style="width: 50%;">
            <div class="ui-field-contain">
                <label for="slider">
                    Fieldcontain, mini sized Slider:
                </label>

                <input type="range" name="slider" 
                    id="slider" data-track-theme="b" 
                    data-mini="true" data-theme="b" 
                    min="0" max="100" value="50">
            </div>
        </form>
    </center>
</body>

</html>

Output:

How to create a Fieldcontain mini sized using jQuery Mobile ?

P

ppatelkap

Improve

Article Tags :

Similar Reads

How to create a Fieldcontain mini sized 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 Fieldcontain mini sized using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€styles

How to create a Fieldcontain 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 Fieldcontain slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€styleshee

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â€

How to create Mini Fieldcontain flip toggle switch 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 Mini Fieldcontain flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <

How to create a Disabled 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 Disabled Slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to create a Mini sized selects 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 selects using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="sty

How to create a Highlighted 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 highlighted slider using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€

How to create Fieldcontain flip toggle switch 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 Fieldcontain flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link

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

How to create Mini flip toggle switch 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 a Mini flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="