Telerik Forums
UI for ASP.NET AJAX Forum
2 answers
19 views

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

Petr
Top achievements
Rank 1
Iron
 answered on 02 Feb 2024
0 answers
54 views

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 

Omar
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 11 Sep 2022
0 answers
49 views

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

 

Omar
Top achievements
Rank 3
Iron
Iron
Iron
 asked on 08 Sep 2022
1 answer
44 views

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

Vessy
Telerik team
 answered on 17 Nov 2021
3 answers
366 views

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.

 

Peter Milchev
Telerik team
 answered on 29 Jan 2021
1 answer
42 views

 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

Vessy
Telerik team
 answered on 11 Aug 2020
3 answers
46 views

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

Rumen
Telerik team
 answered on 29 Jun 2020
2 answers
84 views

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();
}

 

Doncho
Telerik team
 answered on 26 Jun 2020
3 answers
117 views
I have a custom paging control that I am using in my application.
The markup for the control is listed below. The problem I am having is that the slider doesn't always render the skin correctly. When it renders the only thing I see is a link with the word "Drag"; please see the attached image. I tried adding the reference to the top of the page to Get the WebResource for the skin but that didn't work. Any help would be greatly appreciated.

<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>

Denise
Top achievements
Rank 1
 answered on 11 Dec 2019
5 answers
46 views
Sorry if this is a duplicate--couldn't find this question elsewhere...

I would like my range RadSlider to only accept changes via dragging the handles, not by clicking on the track itself. What should I set to achieve this? I noticed that setting SmallChange and LargeChange to zero caused the slider to disappear. Here is my current definition:

<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>

And here's how it looks (attached image):

David
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 13 Nov 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?