Slider control to select time of day

[Martin]

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?

[Princy]

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.

[Martin]

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

[Slav]

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

[Martin]

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

[Qurat]

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

[Slav]

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

[Qurat]

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

[sri]

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

Is that possible using your RadSlider?