I displayed a lot of charts which contains too many data. So I define XAxis.MaxValue and/or XAxis.MinValue at the beginning. User can use zooming and panning function if needed. But sometimes it is not clear that some part of chart is not visible and how many values are hidden. If I understand well then "Data Navigation" can be used only for date axis, but it is not true in most of my cases.
My idea is to display below chart "Range Slider" and simply show left and right boundary of the chart. At the beginning it will be enough just to display the position (after events drag/zoom). Later I want implement that user can change the zoom and position of chart by using the slider, but I am not sure if it is possible to modify chart by client methods.
Did anybody try to implement something like that or is there any similar functionality which I didn't noticed?
Thank you,
Petr
Hi,
I have a slider that I create from code. I selected the option IsDirectionReversed = true.
It works fine visually, but not when getting the selected value from JS.
Example:
My slider starts from "1" to "5" when I reverse the slider and drag the " Drag handler" to "2", when I get the selected text I get "4".
It's like its display reverse but does treat it like so.
Any help Please.
Regards,
Omar
Hi,
I have a slider with long text, the text will show in two lines but does not fit well. See attached image.
How can I remove the space between the lines so it can fit? or how to style the text so that it will show nicely?
Thanks in advance,
Omar
This is my ajax web form Slider
sli.MaximumValue = 100;
sli.MinimumValue = 0;
sli.OnClientSlideEnd = "ClientSlideEnd";
sli.Width =410;
sli.Style.Add(HtmlTextWriterStyle.Display, "inline-block");
sli.ItemType = SliderItemType.Tick;
sli.ThumbsInteractionMode = SliderThumbsInteractionMode.Free;in
in client side CliendSlideEnd function I call a server side sub, when I slide the thumb, I have only one thumb, the control works fine, It fires correctly the SlideEnd event and I can retrieve the new value, but If I click on slider, rather than slide, the ClientSlideEnd doesn't fires; So I've tried to use ClientSlideValueChanged but it fires too much time when I slide the thumb, any suggestions?
Thanks a lot
Hi,
I am using the slider in an asp.net webforms environment.
At the start of the page, the handle is on the middle of the slider, and both side of the sliders are greyed out.
Let say the slider has a maximum range of 10. By default the handle is displayed at 5.
To select 6, the user slide to the right, and to select 4 the user slide to the left.
When the user slides the handle, then the left part of the handle change to green.
If the user wants to select 5, the only way to do it at the moment is to either select 4 or 6 and then back to 5, which is not great at all.
Question 1:
Is it possible to create a onclientclick event on the handle, so when the user click on the handle it register that change as 5.
Question 2:
Is it possible to change the colour of the handle depending on the value selected
Question 3:
I am using the 'Telerik' skin which display a green colour for the slider selection, would it be possible to change the colour to red, depending on the user selection.
To illustrate my question, in the attachment below I would like to have:
First slider: The handle in a dark grey
Second slider: Has been used, would be great to have green handle
Third slider: the slider has not been used and the handle is sitting on the middle, clicking on the handle would select the value 3, and the left side of the handler would become green.
Thank you for your help.
Hi,
I have a slider with a number of sliding zones.
I want to save data (in server side) when I close/collapse one of these sliding zone.
I have collected the data in a hiddenfield using javascript.
Now I need to save the content of this hiddenfield in the database.
Thank you for your help
Anne
We are attempting to update the drag handle text to match the current value. The basic technique is outlined here: https://www.telerik.com/forums/display-the-current-values
The problem is that the text is not updated when the page is loaded. We tried to access the drag handles (get_dragHandles()[0]) in the client load event, but the drag handles are null at that point. Looking at the state of the control at this point shows some interesting values such as "initialized internal" being false and not value being set the for the "drag handle element". If I retrieve the drag handles in another event such as value changed they exist and these values are set as expected.
_dragHandleElement: null
_initializedInternal: false
We simplified our example down to the following and the behavior is reproducible. We are using version 2019.1.215.45 of the controls.
<telerik:RadSlider ID=
"sldTest"
RenderMode=
"Lightweight"
BackColor=
"Red"
Value=
"50"
ForeColor=
"Blue"
MinimumValue=
"0"
MaximumValue=
"100"
Width=
"500"
ShowDragHandle=
"True"
OnClientLoad=
"sldTest_ClientLoad"
OnClientValueChanged=
"sldTest_ClientValueChanged"
runat=
"server"
/>
function sldTest_ClientLoad(slider, args) {
//alert(slider.get_dragHandles()[0]);
}
function sldTest_ClientValueChanged(slider, args) {
alert(slider.get_dragHandles()[0].firstChild.innerHTML);
}
I have a slider with divs that get updated on clientside with the slider value.
I noticed that my slidervalue changes first and there's a little lag when the draghandle responds. Below is my slider definition and my client side code. Could you help me figure the delay in the drag handle response?
<
telerik:RadSlider
ID
=
"RadSliderAge"
runat
=
"server"
MinimumValue
=
"0"
MaximumValue
=
"90"
IsSelectionRangeEnabled
=
"true"
SelectionStart
=
"45"
SelectionEnd
=
"70"
SmallChange
=
"1"
OnClientSlide
=
"clientValueAgeChange"
OnClientLoad
=
"clientValueAgeLoad" ShowDecreaseHandle="true" ShowIncreaseHandle="true" TrackMouseWheel="false"
ThumbsInteractionMode="Lock" Skin="Material"
>
</
telerik:RadSlider
>
function clientValueAgeLoad(sender, eventArgs) {
var CurrentAgeCtrl = document.getElementById("CurrentAgeCtrl");
var RetirementAgeCtrl = document.getElementById("RetirementAgeCtrl");
CurrentAgeCtrl.innerHTML = sender.get_selectionStart();
RetirementAgeCtrl.innerHTML = sender.get_selectionEnd();
}
function clientValueAgeChange(sender, eventArgs) {
var CurrentAgeCtrl = document.getElementById("CurrentAgeCtrl");
var RetirementAgeCtrl = document.getElementById("RetirementAgeCtrl");
CurrentAgeCtrl.innerHTML = sender.get_selectionStart();
RetirementAgeCtrl.innerHTML = sender.get_selectionEnd();
CalcOutputs();
}
<
asp:Panel
ID
=
"pagerContainer"
CssClass
=
"pagercontainer"
runat
=
"server"
>
<
table
border
=
"0"
width
=
"100%"
cellpadding
=
"2"
cellspacing
=
"2"
>
<
tr
>
<
td
valign
=
"middle"
width
=
"105px"
nowrap
=
"nowrap"
>
<
asp:Panel
ID
=
"LeftContainer"
runat
=
"server"
CssClass
=
"pagerCommand"
>
<
asp:ImageButton
AlternateText
=
"First Page"
CommandName
=
"First"
ID
=
"firstPageButton"
ImageAlign
=
"AbsMiddle"
ImageUrl
=
"~/Images/first.gif"
runat
=
"server"
ToolTip
=
"First Page"
/>
<
asp:ImageButton
AlternateText
=
"Previous Page"
CommandName
=
"Previous"
ID
=
"previousPageButton"
ImageAlign
=
"AbsMiddle"
ImageUrl
=
"~/Images/prev.gif"
runat
=
"server"
ToolTip
=
"Previous Page"
/>
</
asp:Panel
>
</
td
>
<
td
valign
=
"middle"
width
=
"175px"
>
<
asp:Panel
ID
=
"sliderPanel"
CssClass
=
"pagerCommand"
runat
=
"server"
>
<
telerik:RadSlider
ID
=
"slider"
runat
=
"server"
AnimationDuration
=
"0"
Orientation
=
"Horizontal"
EnableViewState
=
"true"
SmallChange
=
"1"
ShowDecreaseHandle
=
"false"
ShowIncreaseHandle
=
"false"
Width
=
"175px"
Skin
=
"Web20"
AutoPostBack
=
"true"
EnableEmbeddedSkins
=
"true"
>
</
telerik:RadSlider
>
</
asp:Panel
>
</
td
>
<
td
valign
=
"middle"
width
=
"105px"
>
<
asp:Panel
ID
=
"rightContainer"
runat
=
"server"
CssClass
=
"pagerCommand"
>
<
asp:ImageButton
AlternateText
=
"Next Page"
CommandName
=
"Next"
ID
=
"nextPageButton"
ImageAlign
=
"AbsMiddle"
ImageUrl
=
"~/Images/next.gif"
runat
=
"server"
ToolTip
=
"Next Page"
/>
<
asp:ImageButton
AlternateText
=
"Last Page"
CommandName
=
"Last"
ID
=
"lastPageButton"
ImageAlign
=
"AbsMiddle"
ImageUrl
=
"~/Images/last.gif"
runat
=
"server"
ToolTip
=
"Last Page"
/>
</
asp:Panel
>
</
td
>
<
td
align
=
"right"
>
<
asp:Label
ID
=
"positionLabel"
runat
=
"server"
CssClass
=
"pagerinfo"
/>
</
td
>
</
tr
>
</
table
>
<
asp:HiddenField
ID
=
"SliderHiddenField"
runat
=
"server"
/>
</
asp:Panel
>
<
telerik:RadSlider
runat
=
"server"
ID
=
"rslSol"
IsSelectionRangeEnabled
=
"True"
Width
=
"150"
ShowDecreaseHandle
=
"False"
ShowIncreaseHandle
=
"False"
ThumbsInteractionMode
=
"Push"
EnableDragRange
=
"False"
TrackMouseWheel
=
"False"
OnClientValueChanged
=
"rlsSolSlideChanged"
OnClientSlideEnd
=
"rslSolSlideEnd"
></
telerik:RadSlider
>