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:
Horizontal HTML slider

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:
Vertical HTML slider

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:
range HTML slider

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:
Slider Selected Value

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:
Slider with min and max value

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:
disable slider
Java Programming Examples

GCD and Rational Number Java Program

Java Queue Program using exception

Java Stack Program using exception

Addition of three integers java program

Biggest of three integers java program

Fibonacci numbers java program

Arithmetic Operations Menu java program

Second Smallest Element In Array Java Program

Transpose Of A Matrix Java Program

Java Program to Display triangle of stars (*)

Java Programming Prints Product Tables

Java Program to Display triangle of numbers

Java Programming Gets Current Date

Java Programming Finds Character Vowel or Consonent

Java Programming HCF and LCM Computation

Java Programming Sum of Command Line Integer Arguments

Java Programming Multiplication of Command Line Integer Arguments

Java Programming Multiplication of Command Line Floating Point Numeric Arguments

Java Programming String Contains or Not

Java Programming Gets Grade Description using Switch

Java Programming CSV File Reader

Java Programming Character Frequency Count in String using for each

Java Programming Finds Min from Integer Array by Passing Array to Method

Java Programming Linear Search

Java Programming Binary Search

Java Programming Ternary Search

Java Programming Generates Range of Numbers

Java Programming Generates Range of Characters

Java Programming Computes Square Root Value

Java Programming Checks Number is Positive or Negative

Java Programming Checks Number is Odd or Even

Java Programming Computes Plot Area

Java Programming Convert Number of Days into Years

Java Programming Checks a Year is Leap Year, Century Year or Not

Java Programming Checks a Character is Digit, Letter or neither digit nor letter

Java Programming Checks a Number is Palindrome or not

Java Programming Sum of Two Matrix

Java Programming Power Computation

Java Programming Checks Number is an Armstrong Number or not

Java Programming Temperature Unit Conversions

Java Programming Generates Random Numbers in Specified Range

Java Programming Computes Sum of Digits and Product of Digits

Java Programming Computes Reverse Number

Java Programming Computes Factorial Value

Java Programming Checks Prime Number or not

Java Programming Computes Harmonic Series

Java Programming Generates Floyd's Triangle

Java Programming Reverses String

Java Programming Checks Palindrome String or not

Java Programming Opens Notepad

Java Programming Searches String using RegEx Pattern

Java Programming Searches Word in String

Java Programming Gets System Environment Variables

Java Programming Gets IP Address of Server Name

Java Programming Arrays Sort and Reverse using sort method

Java Programming Bubble Sorting

Java Programming Selection Sorting

Java Programming Insertion Sorting

Java Programming Merge Sorting

Java Programming Quick Sorting

Java Programming Counting Sort

Java Programming Radix Sorting

Java Programming Sorting Array of Strings

Java Programming String Characters Sorting

Java Programming Sum of First N Numbers

Java Programming Product of First N Numbers

Python installation

Privacy Policy  |  Copyright@2017 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Free online programming tutorials

Email Facebook Google LinkedIn Twitter
^