jQuery UI Slider slide Event

Last Updated : 23 May, 2022

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 slide event is used to trigger every mouse move during the slide. The ui.value represents the value of the result of the current movement.

The Slider slide Event accepts two values that are listed below:

event: It represents the event for the slider widget.
ui: It is of an object type that accepts three values that are –
- handle: It represents the handle that was changed. It is of Element type.
- handleIndex: It represents the numeric index of the handle that is moved when the slider is sliding. It is of a Number type value.
- value: It represents the current value of the slider. It is of a number type value.
- values: It represents an array of the current values of a multi-handled slider. It is of Array type value.

Syntax:

Initialize the slider with the slide callback:

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

Bind an event listener to the slide event:

$( ".selector" ).on( 
    "slide", 
    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 slide Event.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title> 
        jQuery UI Slider slide 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 slide Event</h2> 
        <div id="GFG"></div> 
    </center> 
    <script> 
        $(function () { 
            $("#GFG").on('slide', function () { 
                alert('Slider Event Triggered!'); 
            }) 
            $("#GFG").slider(); 
        }); 
    </script> 
</body> 
</html>