slider drag handle - not dragging

[Erik]

**UPDATE** Doesn't seem to work when adding it into a MasterPage Content page in IE7 only in FireFox it works??
I'm trying to get the RadSlider drag handle to move when clicking on it and dragging it horizontally either direction with no luck.  Using the side arrows or clicking on the slider bar will move the handle, but dragging the handle itself doesn't work.  Not sure what I'm missing here or if I'm supposed to implement some javascript here to allow for that functionality?

 

<telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0" MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide()"

 

 

ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik" OnClientValueChange="HandleValueChange">

 

 

</telerik:RadSlider>

 

RadSlider0.Value = (

Int32)dr[3];

 

RadSlider0txt.Visible =

true;

 

RadSlider0.Visible =

true;

 

[kamini]

hello Erik

try this

 

OnClientValueChanged

 

="ScrollProducts" OnClientLoad="ScrollProducts"

<script type="text/javascript">

 

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>

or
go through this link of demo
http://demos.telerik.com/aspnet-ajax/slider/examples/customscrollbar/defaultcs.aspx

and if still it won't work thn let me have the code inside the functions "clientSlide()" and "HandleValueChange"
that u have used for OnClientSlide and OnClientValueChange

 

[Erik]

kamini,
thanks for the response!
***I have this working in FireFox, but not IE7????  It doesn't even go into the OnClientSlideEnd function and narrowing the possibilities it does work when not in a content page, but with master page it fails??***
 My sliders are simply updating numeric values in a textbox and everything works fine, except when you try and drag the handle and change the values and nothing happens....it wont move left or right, but again...clicking on the slider bar works and clicking the slider arrows work, just not the slidehandle??????.  Is there something I need to set to say when the user moves the draghandle that I need to set the draghandle properties somewhere  (i.e dragHandle.value() = sender.get_value())?  I'd imagine this is something that should be built into the control and moved based on my set min/max values, but this doesn't seem to be the case.  Everything about the control works except this.....

My clientSlide function has nothing in it because I'm not sure what to put in there or if it's even needed and all my updating of the numeric values in my associated textboxes happen in the OnClientValueChange which doesn't involve the slider control per say.
Interestingly, adding in OnClientSlideStart="OnClientSlideStart" and OnClientSlideEnd="OnClientSlideEnd" result in nothing happening either...which I'm guessing since I cannot drag the handle it never enters these functions!

[Tsvetie]

Hi Erik,
There is a problem in the original code that you posted that prevents the dragHandle from moving as expected:

<telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0"
    MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide()"
    ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik"
    OnClientValueChange="HandleValueChange">
</telerik:RadSlider>

You should set the OnClientSlide property to the name of the client-side function, that is, you should remove the brackets:

<telerik:RadSlider ID="RadSlider0" runat="server" ItemType="None" MinimumValue="0"
    MaximumValue="100" SelectionEnd="100" Value="0" OnClientSlide="clientSlide"
    ShowDragHandle="true" AnimationDuration="300" Height="20px" Width="106px" Skin="Telerik"
    OnClientValueChange="HandleValueChange">
</telerik:RadSlider>

In case this does not fix the problem, please open a new support ticket and send me a running test project that demonstrates the problem.

Greetings,
Tsvetie
the Telerik team

[Erik]

thx, for the response......the onclientslide issue you are correct, it was my futile attempt to get the javascript function to be called and was really just the issue of what I found below:

The problem I've discovered is being caused by CSS styling attributes and it seems that the Telerik slider control "drag handle" will not work in IE7 if you have the following in your css.  Note this WILL work in firefox just not IE7 and I have not tested IE6 or IE8 versions.

<style type="text/css">
    a:hover
    {
        cursor:pointer !important;
    }
</style>

I hope this helps someone save a lot of hours and frustration.

[Paul Desormeaux]

I'm having the same kind of issue: a slider connected to two numeric text-boxes, mutually updatable.
The code below works fine in IE. In FireFox & Chrome, the slider does not slide.
If I remove slider event OnClientValueChanged="HandleValueChanged_ListPrice", then the slider works
but the text-boxes are not updated.

Help would be appreciated here.

Paul
--------------------------------------------------------------------------------------------------

                        <telerik:RadSlider
                            ID="RadSlider_ListPrice"
                            runat="server"
                            Height="22px"
                            IsSelectionRangeEnabled="True"
                            SelectionEnd="1000000000"
                            Skin="Outlook"
                            Width="170px"
                            MaximumValue="1000000000"
                            ShowDecreaseHandle="False"
                            ShowIncreaseHandle="False"
                            SmallChange="0"
                            Length="170"
                            SlideStep="0"
                            DragText="Set List Price range."
                            Font-Names="Arial"
                            Font-Size="8pt"
                            ItemType="Item"
                            OnClientValueChanged="HandleValueChanged_ListPrice"
                            OnClientSlideStart="OnClientSlideStart_ListPrice"
                            OnClientSlideEnd="OnClientSlideEnd_ListPrice"
                            ToolTip="Specify List Price range.">
                        </telerik:RadSlider>

                        <telerik:RadNumericTextBox
                            ID="RadNumericTextBox_ListPriceLow"
                            Runat="server"
                            Culture="English (United States)"
                            EmptyMessage="Please enter a minimum List Price here."
                            MaxValue="100000000"
                            MinValue="0"
                            ShowSpinButtons="True"
                            Skin="Outlook"
                            Type="Currency"
                            Value="0"
                            Width="95px"
                            DataType="System.UInt64"
                            Font-Names="Arial"
                            Font-Size="8pt"
                            InvalidStyleDuration="300"
                            ToolTip="Minimum List Price."
                            MaxLength="12"
                        >
                            <ClientEvents
                                OnBlur="HandleOnBlur_ListPriceLow"
                                OnButtonClick="HandleOnButtonClick_ListPriceLow"
                            />
                        </telerik:RadNumericTextBox>
                    </td>
                    <td style="text-align: left">
                        <telerik:RadNumericTextBox
                            ID="RadNumericTextBox_ListPriceHigh"
                            Runat="server"
                            Culture="English (United States)"
                            DataType="System.UInt64"
                            EmptyMessage="Please enter a maximum List Price here."
                            Font-Names="Arial"
                            Font-Size="7pt"
                            InvalidStyleDuration="300"
                            MaxValue="100000000"
                            MinValue="50000"
                            ShowSpinButtons="True"
                            Skin="Outlook"
                            ToolTip="Maximum List Price [$100,000,000 = Unlimited]."
                            Type="Currency"
                            Value="100000000"
                            Width="95px"
                            MaxLength="12"
                         >
                            <ClientEvents
                                OnBlur="HandleOnBlur_ListPriceHigh"
                                OnButtonClick="HandleOnButtonClick_ListPriceHigh"
                            />
                        </telerik:RadNumericTextBox>

<script type="text/javascript">

    var In_HandleOnBlur_ListPriceLow_Or_High = false;
    var RadSlider_ListPrice_Sliding = false; // state of slider

    function HandleValueChanged_ListPrice(sender,eventArgs)
        {
        if ( ! RadSlider_ListPrice_Sliding ) // wait until ListPriceSlider slide has ended!
            {
            if ( ! In_HandleOnBlur_ListPriceLow_Or_High )
                {
                var items = sender.get_items();

                var inx_low = sender.get_selectionStart();
                var value_low = items[ inx_low ].get_value();
                var list_price_low = $find( 'RadNumericTextBox_ListPriceLow' );
                list_price_low.set_value( value_low );

                var inx_high = sender.get_selectionEnd();
                var value_high = items[ inx_high ].get_value();
                var list_price_high = $find( 'RadNumericTextBox_ListPriceHigh' );
                list_price_high.set_value( value_high );
                }
            else
                In_HandleOnBlur_ListPriceLow_Or_High = false;
            }
        }
       
    function OnClientSlideStart_ListPrice( sender, eventArgs )
        {
        RadSlider_ListPrice_Sliding = true;
        }

    function OnClientSlideEnd_ListPrice(sender,eventArgs)
        {
        RadSlider_ListPrice_Sliding = false;

         // this event fired before ValueChanged event -so set the Min & Max ListPrice values here
         // to make sure the AJAX callback to server is executed!

        var items = sender.get_items();

        var inx_low = sender.get_selectionStart();
        var value_low = items[ inx_low ].get_value();
        var list_price_low = $find( 'RadNumericTextBox_ListPriceLow' );
        list_price_low.set_value( value_low );

        var inx_high = sender.get_selectionEnd();
        var value_high = items[ inx_high ].get_value();
        var list_price_high = $find( 'RadNumericTextBox_ListPriceHigh' );
        list_price_high.set_value( value_high );
        }

</script>
-----------------------------------------------------------------------------------------------------------------------

[Tsvetie]

Hello Paul Desormeaux,
There are several problems in the code that you have posted, all of which prevent the client-side code of RadSlider from working. Basically, as there is a JS error on your page, the slider cannot initialize correctly.

The first error that I get is the following:

Error: Sys.ArgumentOutOfRangeException: SmallChange should be decimal bigger than 0
Parameter name: value
Actual value was 0.

This error is a result of the fact that you have tried to set the SmallChange/SlideStep properties of the slider to "0". Please set these properties to a value, bigger than 0.

Then, when I changed the value of the properties to 1, I got four errors that the following functions are not defined:

<ClientEvents OnBlur="HandleOnBlur_ListPriceLow" OnButtonClick="HandleOnButtonClick_ListPriceLow" />

<ClientEvents OnBlur="HandleOnBlur_ListPriceHigh" OnButtonClick="HandleOnButtonClick_ListPriceHigh" />

As soon as I added these functions to the page, the page opened without a JS error. However, when I tried to move the dragHandle of the slider, I got another JS error:

Error: 'undefined' is null or not an object

The error was raised in your code as there are no items in the Items collection of the slider:

var value_low = items[inx_low].get_value();

As soon as I added a few items to the Items collection of the slider, the page opened without a JS error and I was able to move both dragHandles in IE and FF. I have attached my test page for your reference.

In case this information does not help you fix the problem, please open a formal support ticket and send me a running test project that demonstrates the problem.

Kind regards,
Tsvetie
the Telerik team

[Paul Desormeaux]

Hi.

Thank you for that reply.

I just discovered why the RadSlider drag handle was not dragging (moving) under FF (Firefox) & Chrome browsers, so thought it could be useful to the community.

My HandleValueChanged_ListPrice() handler function had a document control reference error of some kind when executing in FF or Chrome environments (note: it works OK in IE) and was generating a runtime exception. I placed try {] catch {} (gotta use more of those...) around the code and now handle the situation appropriately.

So, take note, if there is an error in a slider event handler, the handles don't move.

Hope this helps someone...

Paul

[Svetlina Anati]

Hello Paul,

What you report is possible to happen no matter the js error is throws in the handler or not. Generally, when a js error is thrown, this causes unexpected behavior and most often prevents any other javascript from execution. Since RadControls are mostly javascript this causes e.g the slider handle not to drag (this is done through javascript in the source code), the RadWindow will not open. etc. This being said, you should always make sure that you do not have javascript errors, no matter you use RadControls or not, especially when your page relies on javascript.

Regards,

Svetlina
the Telerik team