Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs when currently selected slide is about to change.

Event Data

eObjectAn event object which contains the group


This event can be handled by binding the 'slidechanging' event to the SlideBar widget object.

Version Information

Supported in: v1.0.


In this example we are showing how to create a handle to the slidechanging event in SlideBar widget.

By handling this event you can prevent slide changes depending on some custom conditions or perform some custom action. In our example when second button is clicked, the second slide will never appear.

$(document).ready(function() {

// Create an instance of SlideBar widget

var $bar = $('#slidebar').slidebar({

slideWidth: 500,

slideHeight: 300




"slidechanging": function(e){

// Get the index of the slide that is going to become selected

var slideIndex = $.inArray(e.object, currentList);

// If the index equals 1, abort slide change

if (slideIndex === 1)

return false;



<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.slidebar.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.slidebar.min.js"></script>



<div id="slidebar" class="widget">



<li><div class="slide"><span>Slide 1</span></div></li>

<li><div class="slide"><span>Slide 2</span></div></li>

<li><div class="slide"><span>Slide 3</span></div></li>








background-color: white;

border: thin solid gray;

height: auto;;




width: 500px;

height: 300px;

text-align: center;


.slide span


display: inline-block;

font-size: 3em;

margin: 25% auto;

vertical-align: middle;



See Also