jQuery UI & Slider: Range with fixed minimum

This entry is part 6 of 11 in the series jQuery UI Slider

jQuery UI Slider – Range with fixed minimum

Fix the minimum value of the range slider so that the user can only select a maximum.

Set the range option to “min.”

When you move the slider, you are now selecting the maximum value.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Range with fixed minimum</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider-range-min').slider({
                range: 'min',
                value: 37,
                min: 1,
                max: 700,
                slide: function (event, ui) {
                    $('#amount').val('$' + ui.value);
                }
            });
            $('#amount').val('$' + $('#slider-range-min').slider('value'));
        });
    </script>
</head>
<body>

<p>
    <label for='amount'>Maximum price:</label>
    <input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;'>
</p>

<div id='slider-range-min'></div>

</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Slider: Range with fixed maximum

This entry is part 3 of 11 in the series jQuery UI Slider

jQuery UI Slider – Range with fixed maximum

Fix the maximum value of the range slider so that the user can only select a minimum.

Set the range option to “max.”  

So now when you are selecting with the slide, you are selecting the minimum value.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Range with fixed maximum</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider-range-max').slider({
                range: 'max',
                min: 1,
                max: 10,
                value: 2,
                slide: function (event, ui) {
                    $('#amount').val(ui.value);
                }
            });
            $('#amount').val($('#slider-range-max').slider('value'));
        });
    </script>
</head>
<body>

<p>
    <label for='amount'>Minimum number of bedrooms:</label>
    <input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;'>
</p>

<div id='slider-range-max'></div>

</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Slider: Range

This entry is part 9 of 11 in the series jQuery UI Slider

jQuery UI Slider – Range slider

Set the range option to true to capture a range of values with two drag handles.

The space between the handles is filled with a different background color to indicate those values are selected.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Range slider</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider-range').slider({
                range: true,
                min: 0,
                max: 500,
                values: [ 75, 300 ],
                slide: function (event, ui) {
                    $('#amount').val('$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ]);
                }
            });
            $('#amount').val('$' + $('#slider-range').slider('values', 0) +
                    ' - $' + $('#slider-range').slider('values', 1));
        });
    </script>
</head>
<body>

<p>
    <label for='amount'>Price range:</label>
    <input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;'>
</p>

<div id='slider-range'></div>

</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Slider: Multiple sliders

This entry is part 7 of 11 in the series jQuery UI Slider

jQuery UI Slider – Multiple sliders

Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Multiple sliders</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #eq span {
            height: 120px;
            float: left;
            margin: 15px
        }
    </style>
    <script>
        $(function () {
            // setup master volume
            $('#master').slider({
                value: 60,
                orientation: 'horizontal',
                range: 'min',
                animate: true
            });
            // setup graphic EQ
            $('#eq > span').each(function () {
                // read initial values from markup and remove that
                var value = parseInt($(this).text(), 10);
                $(this).empty().slider({
                    value: value,
                    range: 'min',
                    animate: true,
                    orientation: 'vertical'
                });
            });
        });
    </script>
</head>
<body>

<p class='ui-state-default ui-corner-all ui-helper-clearfix' style='padding:4px;'>
    <span class='ui-icon ui-icon-volume-on' style='float:left; margin:-2px 5px 0 0;'></span>
    Master volume
</p>

<div id='master' style='width:260px; margin:15px;'></div>

<p class='ui-state-default ui-corner-all' style='padding:4px;margin-top:4em;'>
    <span class='ui-icon ui-icon-signal' style='float:left; margin:-2px 5px 0 0;'></span>
    Graphic EQ
</p>

<div id='eq'>
    <span>88</span>
    <span>77</span>
    <span>55</span>
    <span>33</span>
    <span>40</span>
    <span>45</span>
    <span>70</span>
</div>

</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Slider: Basic slider

This entry is part 1 of 11 in the series jQuery UI Slider

jQuery UI Slider – Default functionality

The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#slider').slider();
        });
    </script>
</head>
<body>

<div id='slider'></div>

</body>
</html>
Try The Code Slider Widgets API Doc