Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Occurs when currently selected slide is changed.

Event Data

eObjectAn event object which contains the group


This event can be handled by binding the 'slidechanged' 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 slidechanged event in SlideBar widget.

$(document).ready(function() {

// Create an instance of SlideBar widget

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



"slidechanged": function(e){

console.log("slidechanged event was fired after slide changes to a new slide at position: " + e.object.index);



<!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