Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Slider / Custom Scrollbar

Telerik products Telerik products Telerik products

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ac mi. Suspendisse laoreet faucibus nibh. Quisque justo. Mauris pharetra magna ut felis. Nullam rhoncus pulvinar risus. Sed turpis dui, consequat ut, molestie vel, congue vel, mi. Nunc luctus venenatis ipsum. Nulla non mauris ut lorem aliquam tincidunt. Phasellus tincidunt augue at orci.

Phasellus eu sapien et dolor pharetra aliquam. Praesent tellus. In nonummy, nibh quis tincidunt varius, sem pede vehicula neque, eget dapibus augue odio non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla egestas, nisl id blandit hendrerit, erat dui ullamcorper leo, nec aliquet sem ligula in nulla. Pellentesque tristique. Suspendisse sagittis. Nam in augue. Praesent iaculis justo non dolor. Aenean quis lacus. Nam facilisis mauris in tellus. Pellentesque vitae diam in massa commodo tincidunt. Integer molestie elit rutrum nunc. Suspendisse velit orci, suscipit eget, sagittis at, pellentesque feugiat, erat. Nulla sit amet orci a tellus varius malesuada. Nunc adipiscing vehicula leo. Donec condimentum libero volutpat orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pulvinar. Sed lectus. Aliquam in felis ut nisi malesuada interdum.


  • Custom scrollbar

    This is a sample application scenario which shows how to implement a simple custom scrollbar with RadSlider. You can use the slider to scroll the content of the DIV element.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Slider.CustomScrollbar.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
        .Content_Wrapper,.Boxes_Wrapper
        {
            overflow:hidden;
            position:relative;
            /* set width ! */
        }
        .Content,.Boxes_Content
        {
            position:absolute;
            top:0;
            left:0;
        }
        
        .Lorem{position:relative;width:575px;height:324px;background:url(Images/MainBg.gif) 0 0 no-repeat;margin-left:76px;}
        .Lorem .Content_Wrapper{width:475px;height:185px;top:80px;left:38px;}
        .Lorem .RadSlider{position:absolute;top:63px;right:14px}
        .Lorem .Content h2{font:30px/40px georgia,serif;color:#000;margin:0 0 0.4em;padding:0}
        .Lorem .Content{font:12px/18px arial,sans-serif;}
        
        .Boxes{width:734px;height:192px;background:url(Images/BoxesBg.jpg) 0 0 no-repeat;}
        .Boxes_Wrapper{width:686px;height:116px;top:45px;left:24px;white-space:nowrap;}
        .Boxes_Wrapper img{display:inline}
        .BoxesSlider{width:734px;margin:4px 0 30px}
        .BoxesSlider .RadSlider{margin:0 auto}
        
        </style>
    </head>
    <body class="BODY">

        <script type="text/javascript">
        function ScrollText(sender, eventArgs)
        {
            var wrapperDiv = document.getElementById('content_wrapper');
            var contentDiv = document.getElementById('content');
            var availableHeight = contentDiv.scrollHeight - wrapperDiv.offsetHeight;
                   
            var sliderSmallChange = sender.get_smallChange();
            var sliderMinValue = sender.get_minimumValue();
            var sliderValue = sender.get_value();
            
            var steps = sliderValue / sliderSmallChange;
            var stepLength = availableHeight / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);
            
            var newPosition = (-1) * steps * stepLength;
            contentDiv.style.top = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
        }
        
        function ScrollProducts(sender, eventArgs)
        {
            var wrapperDiv = document.getElementById('boxes_wrapper');
            var contentDiv = document.getElementById('boxes_content');
            var availableWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;
            
            var sliderSmallChange = sender.get_smallChange();
            var sliderMinValue = sender.get_minimumValue();
            var sliderValue = sender.get_value();
            
            var steps = sliderValue/sliderSmallChange;
            var stepLength = availableWidth / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);
            
            var newPosition = (-1) * steps * stepLength;
            contentDiv.style.left = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
        }
        
        </script>

        <form id="Form1" method="post" runat="server">
            <qsf:Header ID="Header1" runat="server" ShowSkinChooser="false" NavigationLanguage="VB" />
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <div class="Boxes">
                <div id="boxes_wrapper" class="Boxes_Wrapper">
                    <div id="boxes_content" class="Boxes_Content">
                        <img src="Images/Boxes.jpg" alt="Telerik products" />
                        <img src="Images/Boxes.jpg" alt="Telerik products" />
                        <img src="Images/Boxes.jpg" alt="Telerik products" />
                    </div>
                </div>
            </div>
            <div class="BoxesSlider">
                <telerik:RadSlider ID="RadSlider2" runat="server" SmallChange="1" Width="224" Value="0"
                    Orientation="Horizontal" OnClientValueChanged="ScrollProducts" OnClientLoad="ScrollProducts"
                    Skin="WebBlue" />
            </div>
            <div class="Lorem">
                <div id="content_wrapper" class="Content_Wrapper">
                    <div id="content" class="Content">
                        <h2>
                            Lorem Ipsum Dolor Sit Amet</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ac mi. Suspendisse
                            laoreet faucibus nibh. Quisque justo. Mauris pharetra magna ut felis. Nullam rhoncus
                            pulvinar risus. Sed turpis dui, consequat ut, molestie vel, congue vel, mi. Nunc
                            luctus venenatis ipsum. Nulla non mauris ut lorem aliquam tincidunt. Phasellus tincidunt
                            augue at orci.</p>
                        <p>
                            Phasellus eu sapien et dolor pharetra aliquam. Praesent tellus. In nonummy, nibh
                            quis tincidunt varius, sem pede vehicula neque, eget dapibus augue odio non dolor.
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla egestas, nisl id
                            blandit hendrerit, erat dui ullamcorper leo, nec aliquet sem ligula in nulla. Pellentesque
                            tristique. Suspendisse sagittis. Nam in augue. Praesent iaculis justo non dolor.
                            Aenean quis lacus. Nam facilisis mauris in tellus. Pellentesque vitae diam in massa
                            commodo tincidunt. Integer molestie elit rutrum nunc. Suspendisse velit orci, suscipit
                            eget, sagittis at, pellentesque feugiat, erat. Nulla sit amet orci a tellus varius
                            malesuada. Nunc adipiscing vehicula leo. Donec condimentum libero volutpat orci.
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pulvinar.
                            Sed lectus. Aliquam in felis ut nisi malesuada interdum.</p>
                    </div>
                </div>
                <telerik:RadSlider ID="RadSlider1" runat="server" SmallChange="1" Height="224" Value="0"
                    Orientation="Vertical" OnClientValueChanged="ScrollText" OnClientLoad="ScrollText"
                    Skin="WebBlue" />
            </div>
            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451