Open In App

jQuery UI Slider create Event

Improve
Improve
Like Article
Like
Save
Share
Report

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. jQuery UI provides us a slider control through the slider widget.

The slider widget helps us to get a certain value using a given range. We can change the slider value by sliding. The create event is used to trigger when the slider is created.

The Slider create event accepts two values that are listed below:

  • event: It represents the event for the slider widget.
  • ui: It is of an object type.

Syntax:

Initialize the slider with the create callback:

$( ".selector" ).slider({
     create: function( event, ui ) {}
});

Bind an event listener to the slidecreate event:

$( ".selector" ).on( 
    "slidecreate", 
    function( event, ui ) {} 
);

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

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: This example describes the jQuery UI Slider create Event.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>
        jQuery UI Slider create Event
    </title>
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
    <style>
        h1 {
            color: green;
        }
        #GFG {
            width: 600px;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI Slider create Event</h2>
        <div id="GFG"></div>
    </center>
    <script>
        $(function () {
            $("#GFG").on('slidecreate', function () {
                alert('Slider has been created!');
            })
            $("#GFG").slider();
        });
    </script>
</body>
</html>


Output:

 

Reference: https://api.jqueryui.com/slider/#event-create



Last Updated : 23 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads