Open In App

jQuery UI Slider value Option

Last Updated : 25 Jan, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the value option in a slider. The value option is used to set the initial value of the slider.

Syntax:

$(".selector").slider(
   { value : 10}
);

Parameters: The slider method accept one option as a parameter discussed below.

  • number: The number of the initial value to be set. By default, the value is 1.
     

Approach: First, add jQuery UI scripts needed for your project.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>

<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>

<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1: In this example, we will be using a number value as 5.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link href=
        rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      
    </script>
  
    <script>
        $(function() {
            $("#gfg").slider({
                value: 5
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>jQuery UI | slider value option</h2>
    <div id="gfg"></div>
</body>
  
</html>


Output:

Example 2: In this example, we will be using a number value as 9. 

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link href=
        rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      
    </script>
  
    <script>
        $(function() {
            $("#gfg").slider({
                value: 9
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>jQuery UI | slider value option</h2>
    <div id="gfg"></div>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

jQuery UI Slider range Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the range
2 min read
jQuery UI Slider orientation Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI provides us a slider control through slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to set the orientation option
2 min read
jQuery UI Slider disabled Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to disable a slider. The
2 min read
jQuery UI Slider min Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to set the min option in a
2 min read
jQuery UI Slider max Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the max option in
2 min read
jQuery UI Slider animate Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to animate a slider. The
2 min read
jQuery UI Slider values Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the values option
2 min read
jQuery UI Slider option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI for the webpages. It provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to use the option() method in jQuery UI sli
2 min read
jQuery UI Slider classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and, jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Slider classes option is used to add some additional classes to the slider element to add some styles. Syntax: $( ".selector" ).slider({ classes: { "ui-slider": "highli
1 min read
jQuery UI slider step Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and, jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI slider step option is used to set the steps (amount of each interval or step) of the slider between the min and max value. Syntax: $( ".selector" ).slider({ step: 5 });
1 min read