How to set the step width

[jenkmeister]

It seems somewhere between the 2008 Q2 and the 2008 Q3 SP2 bits, the slider has changed the way the steps and handle are rendered.

Previously, the size of the slider track (when set with length) would keep the handle image within it's bounds, but when doing the upgrade to the SP2 bits today, the handle is now centering around the step point. This means the left or right half of my image is no longer within the bounds of the slider.

So, is there a way to get the old behavior back (with a property or something similar) or, is there a way to specifically set the step width (and set an initial position to start from).

Thanks
Sean

[Tsvetie]

Hello Sean,
Yes, you are correct - we did change the behavior of the RadSlider. Before, the dragHandle of the slider could move only in the track of the slider. However, I believe you would agree with me on this, the first logical value of the slider is represented by the first pixel of the track. As in order to select a value, you have to position the dragHandle on top of that value (that is the point on the track representing the value should be in the center of the drgaHandle), with the previous implementation, you could not visually select the first value. Because of this, we decided to change the behavior.

Currently, you have 3 cases, based on the value of the ItemType property:

1. None - you have a numeric slider and its first value is represented by the first pixel of the track.
2. Item - the first value is actually the first slider item and as the dragHandle can move only from one item to another, the first position of the dragHandle is the center of the first slider item.
3. Tick - in this case, as the tick mark has a width of its own, and the values of the slider are no longer logically represented by a point, but rather by a tick mark (which can have width>1px), we decided to position the first value of the slider on position (dragHandler.width/2 - tickMark.width/2). That is why in this case you actually get the previous behavior of the slider.

At first we intended to provide you, as a developer, with a property that would configure the slider to behave as before, but this property would have effect only in case you have ItemType='None'.  Additionally, even in case you had a property that would set the position of the first value, in order to get the previous behavior, you would have to calculate its value using the following formula - (dragHandler.width/2). Because of this we decided not to implement such a property.

That is why, currently you can only implement the previous behavior of the slider with ItemType=None, using its client API, just as we have done for our default demo page - http://demos.telerik.com/aspnet-ajax/Controls/Examples/Default/DefaultCS.aspx. Have a look at the following code fragment, which actually is the definition of the slider from that page:

<telerik:RadSlider runat="server" ID="slider1" Width="730" Value="0"
    MinimumValue="-10" MaximumValue="110"
    EnableEmbeddedSkins="false" Skin="QSFHome"
    OnClientLoaded="InitDemoSlider"
    OnClientValueChange="HandleClientValueChange"
    OnClientBeforeValueChange="OnClientBeforeValueChange"
    DecreaseText="View more controls" IncreaseText="View more controls" />

function OnClientBeforeValueChange(sender, args)
{
    // In order for the dragHandle of the slider to never leave the track,
    // the values from -1 to -10 and from 101 and 110 are not valid values.
    var newValue = args.get_newValue();
    if(newValue < 0)
    {
        args.set_cancel(true);
        sender.set_value(0);
    }
    else if(newValue > 100)
    {
        args.set_cancel(true);
        sender.set_value(100);
    }
}

This slider can take values form the range 0 - 100 (even though MinimumValue="-10" and MaximumValue="110") and its dragHandle stays inside the track. Please note that the MinimumValue and MaximumValue depend on the width of the dragHandle and on the space between the slider values. In case you decide to use this approach and have problems implementing it, just send me your code and I will help you get the expected result.

Kind regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jenkmeister]

Excellent - thank you for all that information. I'll try implementing this today and get back to the forums with the results!

[jenkmeister]

I implemented the change and it works really well. I had to do a small tweak to change the position of my track graphic but otherwise, great solution.

Thank you very much! :)