jQuery Mobile: Slider tooltip

This entry is part 71 of 73 in the series jQuery Mobile

For a better UI, you can also use slider with a tooltip.

To have the value shown on the slider indicator, we can use data-show-value=’true’.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Slider with tooltip</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='slider1'>Slider with tooltip:</label>
            <input type='range' name='slider1' id='slider1' min='0' max='100' value='50' data-popup-enabled='true'>
            <label for='slider2'>Slider showing value on button:</label>
            <input type='range' name='slider2' id='slider2' min='0' max='100' value='50' data-show-value='true'>
            <label for='slider3'>Both options together:</label>
            <input type='range' name='slider3' id='slider3' min='0' max='100' value='50' data-show-value='true' data-popup-enabled='true'>
            <label for='slider4'>Both options together (mini):</label>
            <input type='range' name='slider4' id='slider4' min='0' max='100' value='50' data-show-value='true' data-popup-enabled='true' data-mini='true'>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Flip toggle switch

This entry is part 70 of 73 in the series jQuery Mobile

We look at how to build flip toggle switches.  

Flip toggle switches are useful for users to set the App settings, especially if you want to allow users to turn on or off certain features.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Flip Toggle Switch</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='flip1'>Flip toggle switch:</label>
            <select id='flip1' name='flip1' data-role='slider'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip2'>Flip toggle switch with theme:</label>
            <select name='flip2' id='flip2' data-role='slider' data-track-theme='b' data-theme='b'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip3'>Mini flip toggle switch:</label>
            <select name='flip3' id='flip3' data-role='slider' data-mini='true'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Slider with hightlight

This entry is part 69 of 73 in the series jQuery Mobile

To build a slider with highlight, we can use hightlight=’true’ as in the code below:

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Slider</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='slider_id2'>Slider (default is 'false'):</label>
            <input type='range' name='slider2' id='slider_id2' data-highlight='true' min='0' max='100' value='50'>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Basic slider

This entry is part 68 of 73 in the series jQuery Mobile

It’s easy to add a slider using jQM.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Slider</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='slider_id'>Slider:</label>
            <input type='range' name='slider1' id='slider_id' min='0' max='100' value='50'>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code