<
style
type
=
"text/css"
>
.TimelineContainer
{
width:938px;
height: 250px;
margin-bottom:30px;
}
.TimelineContainer h3
{
margin: 0 0 12px;
color: #C94D58;
font: 20px CenturyGothicBold, arial, helvetica, sans-serif;
}
.TimelineImageWrapper
{
width:465px;
height: 250px;
float:left;
}
.TimelineTextWrapper
{
width:432px;
height: 210px;
float:left;
padding: 0px 20px 20px 20px;
}
.TimelineDay
{
font-size:14px !important;
}
</
style
>
<
telerik:RadAjaxPanel
ID
=
"srRadAjaxPanel"
runat
=
"server"
>
<
div
class
=
"TimelineContainer"
>
<
div
class
=
"TimelineImageWrapper"
>
<
asp:Image
ID
=
"imgImage"
runat
=
"server"
Width
=
"465px"
Height
=
"250px"
/>
</
div
>
<
div
class
=
"TimelineTextWrapper"
>
<
h3
>Timeline Header</
h3
>
Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
Timeline text for testing the timeline control. Timeline text for testing the timeline control. Timeline text for testing the timeline control.
Timeline text for testing the timeline control. Timeline text for testing the timeline control.
</
div
>
</
div
>
<
telerik:RadSlider
ID
=
"rsTimelineSlider"
runat
=
"server"
ItemType
=
"Item"
Width
=
"938"
Height
=
"120"
Skin
=
"Transparent"
AutoPostBack
=
"true"
ShowIncreaseHandle
=
"false"
ShowDecreaseHandle
=
"false"
>
<
Items
>
<
telerik:RadSliderItem
Text="June<span
class
=
'TimelineDay'
>5</
span
>1978" />
<
telerik:RadSliderItem
Text="July<span
class
=
'TimelineDay'
>15</
span
>1979" />
<
telerik:RadSliderItem
Text="May<span
class
=
'TimelineDay'
>8</
span
>1980" />
<
telerik:RadSliderItem
Text="August<span
class
=
'TimelineDay'
>11</
span
>1981" />
<
telerik:RadSliderItem
Text="Jan<span
class
=
'TimelineDay'
>12</
span
>1982" />
<
telerik:RadSliderItem
Text="Feb<span
class
=
'TimelineDay'
>9</
span
>1982" />
<
telerik:RadSliderItem
Text="March<span
class
=
'TimelineDay'
>3</
span
>1982" />
<
telerik:RadSliderItem
Text="April<span
class
=
'TimelineDay'
>17</
span
>1982" />
<
telerik:RadSliderItem
Text="Aug<span
class
=
'TimelineDay'
>23</
span
>1985" />
<
telerik:RadSliderItem
Text="June<span
class
=
'TimelineDay'
>25</
span
>1989" />
<
telerik:RadSliderItem
Text="Sept<span
class
=
'TimelineDay'
>14</
span
>1990" />
<
telerik:RadSliderItem
Text="June<span
class
=
'TimelineDay'
>5</
span
>1978" />
<
telerik:RadSliderItem
Text="July<span
class
=
'TimelineDay'
>15</
span
>1979" />
<
telerik:RadSliderItem
Text="May<span
class
=
'TimelineDay'
>8</
span
>1980" />
<
telerik:RadSliderItem
Text="August<span
class
=
'TimelineDay'
>11</
span
>1981" />
<
telerik:RadSliderItem
Text="Jan<span
class
=
'TimelineDay'
>12</
span
>1982" />
<
telerik:RadSliderItem
Text="Feb<span
class
=
'TimelineDay'
>9</
span
>1982" />
<
telerik:RadSliderItem
Text="March<span
class
=
'TimelineDay'
>3</
span
>1982" />
<
telerik:RadSliderItem
Text="April<span
class
=
'TimelineDay'
>17</
span
>1982" />
<
telerik:RadSliderItem
Text="Aug<span
class
=
'TimelineDay'
>23</
span
>1985" />
<
telerik:RadSliderItem
Text="June<span
class
=
'TimelineDay'
>25</
span
>1989" />
<
telerik:RadSliderItem
Text="Sept<span
class
=
'TimelineDay'
>14</
span
>1990" />
</
Items
>
</
telerik:RadSlider
>
</
telerik:RadAjaxPanel
>