jQuery Tutorial

HTML Slider using jQuery

HTML Horizontal, Vertical, Range Slider using jQuery

In jQuery, slider method is used to create a selected element as slider in the web page.

We can make slider as either horizontal or vertical.

Horizontal Slider using jQuery

This jQuery code is used to create div element 'divSlider' as horizontal slider in the web page.

Need to use orientation property as horizontal to make horizontal slider in jQuery.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            width: 200px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div id="divSlider">   </div>
    <script>
        $("#divSlider").slider({
            orientation: "horizontal"
        });
    </script>
</body>
</html>

Output:

Vertical Slider using jQuery

This jQuery code is used to create div element 'divSlider' as vertical slider in the web page.

Need to use orientation property as vertical to make vertical slider in jQuery.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div id="divSlider">   </div>
    <script>
        $("#divSlider").slider({
            orientation: "vertical"
        });
    </script>
</body>
</html>

Output:

Range Slider using jQuery

Below jQuery code is used to slider to select the values as range.

range property to be true to make range slider.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            width: 200px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div id="divSlider">   </div>
    <script>
        $("#divSlider").slider({
            range: true
        });
    </script>
</body>
</html>

Output:

Slider Selected Value in jQuery

value property in slider method is used to set the selected value and ui.value is used to get the selected value during slider change event.

Default min and max value for the slider is 0 to 100.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">100</td></tr></table></div>
    <script>
        $("#divSlider").slider({
            value: 10,
            change: function (event, ui) {
                alert("Selected value: "+ ui.value);
            }
        });
    </script>
</body>
</html>

Output:

HTML Slider with min and max value in jQuery

To make custom minimum and maximum range for the slider, we have min and max properties in slider method to customize the slider range.

change property can be used to configure event handler when changing the slider.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">10</td></tr></table></div>
    <script>
        $("#divSlider").slider({
            min: 0,
            max: 10,
            value: 5,
            change: function (event, ui) {
                alert("Selected value: "+ ui.value);
            }
        });
    </script>
</body>
</html>

Output:

Range Slider Selected Values with min and max in jQuery

This jQuery code is used to set and get the selected range values in slider control.

values property is used to set the selected range values in slider and ui.values is used to get the selected range values in slider from range 0 to 10.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slider method</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #divSlider {
            margin: 10px;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <div style="width:400px;"><table border="0" style="width:100%;"><tr><td style="width:5%;">0</td><td style="width:90%;"><div id="divSlider"> </div></td><td style="width:5%;">10</td></tr></table></div>
    <script>
        $("#divSlider").slider({
            min: 0,
            max: 10,
            range: true,
            values: [3,7],
            change: function (event, ui) {
                alert("Selected value: "+ ui.values);
            }
        });
    </script>
</body>
</html>

Output:

Range Slider selected values with min and max setting

How to disable slider in jQuery

disabled property is used to disable the slider in jQuery.

        $("#divSlider").slider({
            min: 0,
            max: 10,
            range: true,
            disabled: true,
            values: [3,7],
            change: function (event, ui) {
                alert("Selected value: "+ ui.values);
            }
        });

Output: