Slider's SmallChange property and Value

4 posts, 1 answers
  1. Donna Padilla
    Donna Padilla avatar
    8 posts
    Member since:
    Mar 2008

    Posted 31 Dec 2008 Link to this post

    I am having some issues with the SmallChange property of RadSlider, and how it seems to affect the permissible "Values" the slider will accept.

    Here is my scenario: I have a slider for which the MaxValue is dynamically set server-side to the duration of an event in minutes. I need to be able to set the value of the slider down to the minute level.

    Here is the markup for my slider:        

    <telerik:RadSlider ID="SplitRadSlider" runat="server" ItemType="Tick" Skin="Hay" Width="450px" Height="40px" SmallChange="1" LargeChange="30" TrackPosition="TopLeft" AutoPostBack="True" OnValueChanged="SplitRadSlider_ValueChanged" OnClientValueChange="HandleValueChanged" OnClientLoaded="HandleValueChanged"></telerik:RadSlider>

    My issue is that for long events (300 minutes, for instance), the appearance of the slider becomes very cluttered because the small ticks are so close together. The small ticks are basically useless in this scenario because they run together.  I tried setting SmallChange to a larger value (5), but then when I try to set the slider Value to a number that is not divisible by 5 (107 for instance), the slider Value changes to the nearest number divisible by 5 (105 in this case). It seems like the Slider Value can only be set in increments of SmallChange's value, and I need to be able to set its value to any whole number.

    Do you have any suggestions? Is it possible to display the large ticks without the small ticks? I would like to display SOME ticks so the  user has some visual indication of the values along the slider, but it looks very bad when the small ticks are crammed so close together.

    Thanks!

  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 02 Jan 2009 Link to this post

    Hello Donna,
    The SmallChange property sets the smallest unit with which the RadSlider works - it determines its logical range. For example, in case you set SmallChange=5, you configure the slider to work with units that represent 5 numbers each. That is why the slider in this case can accept only values that are divisible by 5.

    In order to configure the slider to be able to accept any whole number from a certain range, you have to set its SmallChange property to 1. 

    Currectly, you cannot control the logic that determines whether the slider will display ticks for the SmallChange/LargeChange. The slider calculates whether there is space for the image of a small/large tick, and in case there is, it creates those ticks. For example, in case you set MinimumValue="0" and MaximumValue="500", you will notice that the slider will display ticks only for its LargeChange values.

    The only solution I can offer you for the time being, is to overwrite the method of the slider that determines what kind of ticks to create and trick it into creating only ticks for the LargeChange values.
    For example:
    <body>  
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
            <telerik:RadSlider ID="SplitRadSlider" runat="server" ItemType="Tick" Skin="Hay" 
                Width="450px" Height="40px" SmallChange="1" LargeChange="30" TrackPosition="TopLeft" 
                MinimumValue="0" MaximumValue="300">  
            </telerik:RadSlider>  
              
            <script type="text/javascript">  
            Telerik.Web.UI.RadSlider.prototype._oldCreateItemDataForTicks = Telerik.Web.UI.RadSlider.prototype._createItemDataForTicks;  
            Telerik.Web.UI.RadSlider.prototype._createItemDataForTicks = function()  
            {  
                // Trick the RadSlider in believing its track is shorter than it actually is. You can use different size than 250px  
                // so that the slider behaves as you expect.  
                var temp = this._getTrackBounds;  
                this._getTrackBounds = function()  
                {  
                    return {width: 250};  
                };  
     
                var tickData = this._oldCreateItemDataForTicks();  
                  
                // Correct the method to return the actual track size.   
                this._getTrackBounds = temp;  
                  
                return tickData;  
            };  
            </script>  
        </form>  
    </body> 


    Sincerely yours,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Donna Padilla
    Donna Padilla avatar
    8 posts
    Member since:
    Mar 2008

    Posted 02 Jan 2009 Link to this post

    Thank you for your suggestion and explanation. That is nice that the slider attempts to determine whether or not to display the small ticks automatically based on the slider size, but unfortunately the threshold is a little different than what I would have chosen. You might in the future consider giving the developer an easier way to control whether or not the small ticks are displayed.

    Just as some feedback, it is a little unintuitive to me that the SmallChange property controls the increment at which the slider's Value can be set. And, I didn't see anywhere in the documention where this is explicitely stated. I understood from the documentation that the SmallChange property controls the smallest increment that the user can move the slider, but still expected that if I set the slider's value from code-behind, that it would set the value to the value I indicated and NOT round it up/down in increments of SmallChange.

    It seems to me like there are several different slider "properties" we are discussing here:
    1) What is the minimum increment that the user is allowed to slide the slider?
    2) What is the increment between small tick marks?
    3) What is the minimum increment that the slider's value can be set to programmatically using client-side or server-side code?

    Currently, setting the SmallChange property affects all of these. However, in my case I only want it to affect #2, which is purely a presentational issue. The other items (#1 and #3) are more data and business rule related. It would be a nice enhancement, IMO, to be able to control #1, #2, and #3 separately.

    Thanks
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 05 Jan 2009 Link to this post

    Hi Donna Padilla,
    Thank you for sharing your opinion with us. I agree with you that the slider could be more flexible.  Currently we are considering changing the ItemType=Tick to three different values:
    1. ItemType=SmallTick
    2. ItemType=LargeTick
    3. ItemType=Tick (SmallTick & LargeTick)

    However, this would still not give you the flexibility you require. On our original list of features for the Tick functionality, we had the TickFrequency property, that would have worked as your #2 feature. However, this property would have effect only in case you had ItemType=Tick and additionally this could interfere with the logic behind the largeTicks. For example, in case you had:

    1. TickFrequency=7
    2. SmallTick=1
    3. LargeTick=50

    I am not quite sure what the result should be. That is why, we decided not to implement such a property, but rather wait to see if the developers would really need it and what exactly they would request as behavior. 

    Additionally, questions such as "should there be ticks for values the slider cannot accept" arose. For example:

    1. TickFrequency=3
    2. SmallTick=5
    3. LargeTick=10

    That is why we decided it would be best to bind the ticks to the SmallChange and LargeChange properties.

    I would appreciate your feedback on the following:

    1. Do you need a property that sets the frequency for the small ticks?
    2. Do you need a property that sets the frequency for the large ticks?
    3. Do you expect #1 and #2 to be different so that you can controls both the small and large ticks?

    Regards,

    Tsvetie
    the Telerik team

     


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