Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Returns the DOM element related with specified slide.


slideStringThe slide to search for

Return Value

If successful, a HTML element that is related to the specified slide, otherwise null.

Version Information

Supported in: v1.0.


In this example by clicking on a button we will get the HTML element that is related with the currently selected slide. If element exists, it is shown in console log.

$(document).ready(function() {

// Create an instance of SlideBar widget

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

slideWidth: 300,

slideHeight: 200



// Get the currently selected slide

var getCurrentSelection = function(){

return $bar.slidebar("option", "selectedSlide");



// Get the DOM element that is related with the selected slide

var getElem = function(){

var elem = $bar.slidebar("getSlideElement", getCurrentSelection());

if (elem)




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



<button type="button" id="search" onclick="getElem()" />Get Element</button>

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








width: 300px;

height: 200px;




width: 300px;

height: 200px;

text-align: center;


.slide span


display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;


See Also