+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);