This is a migrated thread and some comments may be shown as answers.

Creating a Thumbnail Slider

2 Answers 103 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Tim asked on 05 Jan 2009, 12:32 AM
Hello there

I'm writing a site in VB.NET

I'd like to add a product browser to my site like you guys use  I'm talking about the "What's Included" Thumbnail Slider.

I have the code for your demo site on my machine.  I'm having trouble understanding how the slider on the ASPX page links to the html listing of links

I found two settings of interest in the control


I beleive these are qsf.js scripts:

// demo thumbnails slider

function InitDemoSlider(sender, eventArgs)
    var sliderId = sender.get_id();
    eval("initialValue_" + sliderId + " = sender.get_minimumValue();");
    HandleClientValueChange(sender, null);

function HandleClientValueChange(sender, eventArgs)
    var sliderId = sender.get_id();
    var wrapper = document.getElementById(sliderId + "_wrapper");
    var content = document.getElementById(sliderId + "_content");

    var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
    var change = sender.get_value() - oldValue;

    var contentWidth = content.scrollWidth - wrapper.offsetWidth;
    var calculatedChangeStep = contentWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());

    eval("initialValue_" + sliderId + " = initialValue_" + sliderId + " - change * calculatedChangeStep;");

    eval(" = initialValue_" + sliderId + " + 'px';");
    if (sender.get_value() == sender.get_minimumValue())
        eval(" = 0;");

Is there somewhere that more thoughly explains how I can adapt this great usage of the slider control?



2 Answers, 1 is accepted

Sort by
Telerik team
answered on 06 Jan 2009, 11:53 AM
Hello Tim,
You are correct, you need the two functions from the qsf.js.

The main idea behind the "What's Included" section is that you have two elements - DIV and UL. The DIV element plays the role of the visible viewport. When you move the slider, you change the position of the UL so that the correct part of it is displayed in the viewport, using for the slider1_content.

You can find another example of the use of RadSlider as a custom slider here.

Best wishes,
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Top achievements
Rank 2
answered on 06 Jan 2009, 11:18 PM

Ah ok thanks!

For everyone elses learning benefit I've edited the demo code slightly to support any page/div width to make it more portable into your application

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns="">  
<head runat="server">  
    <style type="text/css">  
        /* set width ! */  
    .Boxes{height:70px; background-color: #00FF00; max-width: 1000px;}  
    .Boxes_Wrapper{height:116px; white-space:nowrap; overflow:hidden;}  
    .Boxes_Wrapper img{display:inline}  
<body class="BODY">  
    <script type="text/javascript">  
    var initialValue2;  
    function HandleClientLoaded2(sender, eventArgs)  
        initialValue2 = sender.get_minimumValue();  
        HandleClientValueChange2(sender, null);  
    function HandleClientValueChange2(sender, eventArgs)  
        var wrapperDiv = document.getElementById('boxes_wrapper');  
        var contentDiv = document.getElementById('boxes_content');  
        var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();  
        var change = sender.get_value() - oldValue;  
        var contentDivcontentDivWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;  
        var calculatedChangeStep = contentDivWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());  
        initialValue2initialValue2 = initialValue2 - change * calculatedChangeStep;  
        if (sender.get_value() == sender.get_minimumValue())  
   = 0 + 'px';  
            initialValue2 = sender.get_minimumValue();  
   = initialValue2 + 'px';  
    <form id="Form1" method="post" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <div class="Boxes">  
        <div id="boxes_wrapper" class="Boxes_Wrapper">  
        <div id="boxes_content" class="Boxes_Content">  
            <!-- Pop a few 64x64 images in an images folder located in the same place this aspx file lives --> 
            <href="./Products.aspx?Category=1"><img src="images/product.gif" alt="ProductItem1" /> </a>
            <href="./Products.aspx?Category=2"><img src="images/product.gif" alt="ProductItem2" /> </a>
            <href="./Products.aspx?Category=3"><img src="images/product.gif" alt="ProductItem3" /> </a>
            <href="./Products.aspx?Category=4"><img src="images/product.gif" alt="ProductItem4" /> </a>
            <href="./Products.aspx?Category=5"><img src="images/product.gif" alt="ProductItem5" /> </a>
            <href="./Products.aspx?Category=6"><img src="images/product.gif" alt="ProductItem6" /> </a>
            <href="./Products.aspx?Category=7"><img src="images/product.gif" alt="ProductItem7" /> </a>
            <href="./Products.aspx?Category=8"><img src="images/product.gif" alt="ProductItem8" /> </a>
            <href="./Products.aspx?Category=9"><img src="images/product.gif" alt="ProductItem9" /> </a>
            <href="./Products.aspx?Category=10"><img src="images/product.gif" alt="ProductItem10" /> </a>
            <href="./Products.aspx?Category=11"><img src="images/product.gif" alt="ProductItem11" /> </a>
            <href="./Products.aspx?Category=12"><img src="images/product.gif" alt="ProductItem12" /> </a>
            <href="./Products.aspx?Category=13"><img src="images/product.gif" alt="ProductItem13" /> </a>
            <href="./Products.aspx?Category=14"><img src="images/product.gif" alt="ProductItem14" /> </a>
            <href="./Products.aspx?Category=15"><img src="images/product.gif" alt="ProductItem15" /> </a>
            <href="./Products.aspx?Category=16"><img src="images/product.gif" alt="ProductItem16" /> </a>
            <href="./Products.aspx?Category=17"><img src="images/product.gif" alt="ProductItem17" /> </a>
            <href="./Products.aspx?Category=18"><img src="images/product.gif" alt="ProductItem18" /> </a>
            <href="./Products.aspx?Category=19"><img src="images/product.gif" alt="ProductItem19" /> </a>
        <div style="background-color: #FF0000; width: 100%; max-width: 1000px;">  
        <telerik:RadSlider ID="RadSlider2" runat="server" 
            Skin="Web20" /> 

Thanks for your speedy help Telerik, as soon as my boss gets back to work I'm buying this product!

Asked by
Top achievements
Rank 2
Answers by
Telerik team
Top achievements
Rank 2
Share this question