Slider Customization

[Peter Zolja]

Hi,

1) Is there a way to customize a certain range when ItemType is Item? Changing any of the UI settings (BackColor, ForeColor, etc.) for each RadSliderItem doesn't seem to have any effect. It would be nice if I could specify the background color of the slider or the tick color.

2) Is there a way, when using selection range, to prevent the user from dragging one of the range selectors over the other in effect flipping the range? This is very counter-intuitive. When I drag the right selector, from right to left, I expect it to stop me from going over / beyond the left range.

3) When you click, not drag, somewhere in the slider's area, the slider tries to guess your intention and move the slider (the closest one) to where you clicked. Is there a way to disable this feature and force the user to actually drag the slider?

Thank you.

[Tsvetie]

Hi Peter Zolja,
Straight to your questions:

1. Currently, you cannot customize the appearance of a single RadSlider item. You can only change the way all items look. However, it is on our TODO list to implement the CssClass property of the slider item and you will be able to use it, in order to style each item. This feature will be available with Q3 2008 SP2, scheduled for the middle of January 2008.
2. The slider does not offer the functionality you describe, but you can use its OnClientBeforeValueChange event to achieve the desired effect - just cancel the operation. For example:

   <telerik:RadSlider ID="RadSlider1" runat="server"
       IsSelectionRangeEnabled="true" SmallChange="1"
       SelectionStart="0" SelectionEnd="1"
       OnClientBeforeValueChange="OnClientBeforeValueChange"></telerik:RadSlider>
   <script type="text/javascript">
   function OnClientBeforeValueChange(sender, args)
   {
       var minRangeBetweenHandles = sender.get_smallChange();
       var newValue = args.get_newValue();
   
       var sliderDragHandles = sender.get_dragHandles();
       var activeDragHandle = sender.get_activeHandle();
   
       // In case we are moving the selectionStart dragHandle.
       if(activeDragHandle == sliderDragHandles[0])
       {
           if(newValue >= (sender.get_selectionEnd() - minRangeBetweenHandles))
           {
               args.set_cancel(true);
           }
       }
       // In case we are moving the selectionEnd dragHandle.
       else
       {
           if(newValue <= (sender.get_selectionStart() + minRangeBetweenHandles))
           {
               args.set_cancel(true);
           }
       }
   }
   </script>

3. I am not quite sure what you mean and in case I have misunderstood you, please explain in detail what you are trying to achieve. As far as I understand you, you would like to disable the click on the track of the slider and alow the user to change the value of the slider only by dragging a dragHandle. You can do this, again by using the Client API of the slider. For example:

   <telerik:RadSlider ID="RadSlider2" runat="server" IsSelectionRangeEnabled="true"
       OnClientSlideStart="OnClientSlideStart" OnClientSlideEnd="OnClientSlideEnd"
       OnClientBeforeValueChange="OnClientBeforeValueChange2">
   </telerik:RadSlider>
   
   <script type="text/javascript">
   var toCancel = true;
   
   function OnClientSlideStart(sender, args)
   {
       toCancel = false;
   }
   
   function OnClientSlideEnd(sender, args)
   {
       toCancel = true;
   }
   
   function OnClientBeforeValueChange2(sender, args)
   {
       args.set_cancel(toCancel)
   }
   </script>

   However, the increase and decrese handles will not work as well in this case.   

All the best,
Tsvetie
the Telerik team

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