Multiple Ranges on a single slider?

[Gordon]

I am currently working on a web app that involves choosing multiple ranges of hours per day of the week.  Using the scheduler control would be way overboard with what I am trying to accomplish.  I was wondering, before I commit to using this as a solution, if the slider control has functionality for multiple ranges or if I would easily be able to modify it in order to do this?  Thanks.

[Tsvetie]

Hello Gordon,
Unfortunately, the RadSlider control does not offer the functionality you describe and the changes that need to be made to the code in order to implement it, are not that simple. It is an interesting feature though and I will add it to our list of features for consideration. Until now, we have not been able to think of a real world scenario, where such functionality will be of use and I would appreciate it, if you could share with us some details of your scenario and how you intended to implement it using our slider control, in case it offered such functionality.

All the best,
Tsvetie
the Telerik team

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

[Gordon]

Tsvetie,

I am currently working on the GUI for what is more or less an web-based configuration system.  We are porting it to ASP.NET with a C# code base and I am working to implement a feature where a certain change to the system is only active certain hours of the week.  The users of the system really enjoyed the graphical slider aspect of the current system where we have a vertical bar for each day of the week showing hours.  The user then clicks and drags down a certain area of the bar to indicate a time period where their specified change is active.

I looked into the scheduler control and it seems way too much for the simplicity of my task in comparison.  I appreciate your help and apologize if this functionality is located elsewhere in RadControls as I have not looked through them all yet.  I do like what I see so far! :)

- Gordon

[Tsvetie]

Hello Gordon,
Thank you for the additional information. This indeed is a real world scenario, where such functionality is required. I have forwarded it to our developers and have logged the feature for future consideration.

Sincerely yours,
Tsvetie
the Telerik team

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

[Programmer Nut]

I have a similar issue. Have you come up with a workable solution??

[Tsvetie]

Hi Programmer Nut,
What Gordon ask for was whether the RadSlider control offers a feature, not a problem he had with the control. In case you have a problem with the RadSlider, please explain in detail what the problem is and how we can reproduce it.

In case you want to know whether the current version of the slider control offers the multiple ranges feature that Gordon asked for, the answer is no. It is logged in our database for consideration. Up to now, we have had only this request for such a feature and that is why its priority is low.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Programmer Nut]

No problem.

I was actually asking Gordon directly if he had figured out a good way to solve his problem as I have a similar need.

Thanks
Charles

[Michael]

I would like to see this feature as well.  The scenario I have is just like the original post, in that the user can specify multiple ranges during a single day, but no range would ever overlap another one.  So if the user wanted three time ranges (9-12, 12-5, 5-9), there would be three thumb sliders (at 9, 12, 9).  I would also like to be able to add/remove thumbs on server/client as well.  I'm sure this is not close to the top of the feature idea list, but there are valid scenarios for it.  Thanks!

[Slav]

Hello Michael,

The suggested feature has been considered for implementation and for the time being there aren't plans for adding it in the RadSlider control. If the interest rises in the future, the discussed feature's inclusion will be reconsidered.

All the best,
Slav
the Telerik team

[Bromcom Development Team]

Any update on this feature? We are seeking to have this functionality ASAP.

[Marin Bratanov]

Hi,

I am afraid that demand for such a feature has been rather low and there are no immediate plans for its development. It has been pushed back by ideas with higher demand like the new RadTileList, RadHtmlChart and RadPivotGrid cotnrols.


Regards,
Marin Bratanov
Telerik

[Josh]

+1 for this feature from me as well.

I created a workaround which seems to work pretty well. In my case I only need to display multiple ranges (read-only), but I'm sure with a bit of javascript work it could be made to be editable.

First add a slider to the page. This will cause the web resources for it to be loaded. If you don't use RadSkinManager you might have to set the skin here as well.

<telerik:RadSlider runat="server" ID="rslSlider" style="visibility:hidden"></telerik:RadSlider>

The multi-range slider is then just a few nested divs (elsewhere on the page):

<div id="divTrackBar" class="RadSlider RadSlider_Forest" runat="server">
  <div class="RadSlider rslHorizontal">
    <div id="divTrackInner" runat="server" class="RadSlider rslTrack" style="width:200px;">
      <div class="RadSlider rslSelectedregion" style="width:50px; left:20px;"></div>
      <div class="RadSlider rslSelectedregion" style="width:50px; left:120px;"></div>
      <a class="RadSlider rslDraghandle" style="left:20px;" title="tooltip text"></a>
    </div>
  </div>
</div>

If you use dynamic skinning you can set the skin on Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
  divTrackBar.Attributes["class"] = String.Format("RadSlider RadSlider_{0}", skin);
}

The ranges & handles can also be added in code behind:

divTrackInner.Controls.Clear();
//Add a selected range
HtmlGenericControl item = new HtmlGenericControl("div");
item.Attributes["class"] = "RadSlider rslSelectedregion";
item.Attributes["style"] = "width:80px; left:120px;";
divTrackInner.Controls.Add(item);
//Add a handle
item = new HtmlGenericControl("a");
item.Attributes["class"] = "RadSlider rslDraghandle";
item.Attributes["style"] = "left:120px;";
item.Attributes["title"] = "tooltip text";
divTrackInner.Controls.Add(item);

[Slav]

Hello Josh,

The workaround you created should allow you to display multiple ranges in a static RadSlider control, however adding such functionality in a slider that is not read-only will require a lot if customization of the current logic of the control.

Nevertheless, if this feature becomes popular it might be considered for implementation. You can track its status, vote for it and comment it via the following feedback item: http://feedback.telerik.com/Project/108/Feedback/Details/136696

Regards,
Slav
Telerik