Rank 2
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!
3 Answers, 1 is accepted
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.
Rank 2
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
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:
- ItemType=SmallTick
- ItemType=LargeTick
- 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:
- TickFrequency=7
- SmallTick=1
- 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:
- TickFrequency=3
- SmallTick=5
- 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:
- Do you need a property that sets the frequency for the small ticks?
- Do you need a property that sets the frequency for the large ticks?
- Do you expect #1 and #2 to be different so that you can controls both the small and large ticks?
Regards,
Tsvetiethe Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.