Slider control to select time of day

9 posts, 1 answers
  1. Martin
    Martin avatar
    27 posts
    Member since:
    May 2011

    Posted 20 Nov 2012 Link to this post

    Hello,

    I would like to use a slider to let the user select a range of the day in increments of 5 minutes.

    So the range min value would be 00:00 and range max value would be 23:59 (or 00:00).

    So using the slider, the user is able to select the range 06:25-22:20

    Is that possible using your RadSlider?
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2012 Link to this post

    Hi Martin,

    I suppose you want to select the time range using the RadSlider. One suggestion is that you can use two RadSlider as follows.

    ASPX:
    <telerik:RadSlider ID="RadSlider1" runat="server" MinimumValue="00.00" MaximumValue="23.59" SmallChange="0.5" LargeChange="0.5" Width="1000" ItemType="Tick" Height="70">
    </telerik:RadSlider>
    <telerik:RadSlider ID="RadSlider2" runat="server" MinimumValue="00.00" MaximumValue="23.59" SmallChange="0.5" LargeChange="0.5" Width="1000" ItemType="Tick" Height="70">
    </telerik:RadSlider>
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" />

    C#:
    protected void Button1_Click(object sender, EventArgs e)
     {
        Response.Write("The range =" + RadSlider1.Value + "  -  " + RadSlider2.Value);
     }

    Hope this helps.

    Regards,
    Princy.
  5. Martin
    Martin avatar
    27 posts
    Member since:
    May 2011

    Posted 21 Nov 2012 Link to this post

    Hello and thank you for answer. Unfortunately it does not give what I want...

    * Why cannot I use one slider with two "drags" instead of two sliders?
    * The labels above the slider is marked as 5,5, 6,5 aso intead of 5.50, 6,50 (or 05.50, 06.50). This should be displayed when dragging.
    * I just want to display fixed labels for even hours. 00,01,02,03,04....23. I now found this and modified "LargeChange" to 1.
    * Drag value labels are displayed both on top and below of the slider. How can I modify so only one is displayed? Or none?
    * I have ghosting effects on the sliding "drag". I do not see this in the Visual Studio designer. 
    * If SmallChange is set to 0.5 that must mean 30 minutes. Not 5 minutes. How can the slider control so a value of 12:75 cannot be selected since there are only 60 minutes on an hour?

    I have the same ghosting effects on a combobox. Se image below...


    UPDATE: It seems like when I add a label to the combobox, it gets very thin (as above). Removing the label makes the combobox have the correct width but still ghosting/artifacts...
  7. Answer
    Slav
    Admin
    Slav avatar
    1359 posts

    Posted 23 Nov 2012 Link to this post

    Hello Martin,

    A better approach in this case is to configure the RadSlider to use items then create a data-source that contains all selectable hours and bind it to the slider. Every item has text, tooltip and value so you can configure it according to your scenario.

    You can enable two drag handles for selecting range as shown in this online demo.

    In the overview demo of the slider control you can check how to choose track position, which will determine the location of the labels. In your case, I would suggest removing the labels by not setting the Text property of the items as there are a lot of them and the text will not be readable.

    We are not aware of any ghosting problems with the RadSlider and RadComboBox. Please provide step by step instructions for reproducing these issues so that I can examine them locally. If needed, attach a video demonstrating the problems too.

    All the best,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Martin
    Martin avatar
    27 posts
    Member since:
    May 2011

    Posted 26 Nov 2012 Link to this post

    Hi,

    Thank you for your reply. The problem with the ghost effects on the controls was due to CSS styling. For example, styling <a> was causing the combobox to appear with shadows. Thank you for your solution on the slider aswell. I will look into it in a couple of days...
  11. Qurat
    Qurat avatar
    21 posts
    Member since:
    Jan 2013

    Posted 08 Mar 2013 Link to this post

    hi 

    when databinding to radslider the value comes in between the lines.
    i want the value to come right above the lines(ticks).

    thanks
    @nnu
    punjab lok sujag
  13. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 12 Mar 2013 Link to this post

    Hello Qurat,

    The RadSlider with ItemType set to Item supports only ticks between the items. Nevertheless, there is a way to customize the slider so that the ticks will be centered in every item. The following function is a handler of the client-side event OnClientLoad of RadSlider and it will add the CSS class rslLargeTick to every item so that the tick is displayed below each value:
    function OnClientLoad(sender) {
        $telerik.$(sender.get_element()).find("li.rslItemFirst").removeClass("rslItemFirst");
        $telerik.$(sender.get_element()).find("li").addClass("rslLargeTick");
    }

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Qurat
    Qurat avatar
    21 posts
    Member since:
    Jan 2013

    Posted 13 Mar 2013 Link to this post

    hi slav,
    thankx alot it worked..
    here is my code for others to get help..


    <script type="text/javascript">


        function OnClientLoad(sender) 
        {
            $telerik.$(sender.get_element()).find("li.rslItemFirst").removeClass("rslItemFirst");
            $telerik.$(sender.get_element()).find("li").addClass("rslLargeTick");
        }

        </script>


    <telerik:RadSlider  ID="slider1" runat="server" OnClientLoad="OnClientLoad"   Width="400px"  OnValueChanged="RadSlider1_ValueChanged" ItemType="Item"
                                               Height="70px" AutoPostBack="true"  >
                                             <ItemBinding TextField="year_election"   ValueField="year_election" />
                                            </telerik:RadSlider>

    regards
    @nnu
    punjab lok sujag
  17. sri
    sri avatar
    1 posts
    Member since:
    Jan 2018

    Posted 29 Jan 2018 in reply to Martin Link to this post

    hi i'm searching for same requirement to select the slider     range 4:30 -13:30

    Is that possible using your RadSlider?

     

     

Back to Top