We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Every 30 minutes step


I have a DateTimerangeSlider, I would like to set only two hours within a day but only every 30 minutes should be selectable (for instance 8:30 - 16:00). Is it possible somehow with stepduration? My code so far:

Thank you in advance!

4 Replies

RR Raja Ramalingam Syncfusion Team February 16, 2023 01:56 PM UTC

Hi Ferenc,

Could you please provide us with some additional information about your requirements so that we can better understand your needs? If it is possible, it would be helpful if you could give us an image that illustrates your expected output.


FE Ferenc February 16, 2023 08:22 PM UTC

Hello Raja,

acutally, I just would like to select two times between 08:00 and 17:00 but only times divisible by 30 should be selected, so, 8:00, 8:30, 9:00, etc..



RR Raja Ramalingam Syncfusion Team February 17, 2023 08:56 AM UTC

Hi Ferenc,

To achieve your requirement, we can make use of the "StepDuration" property available in the DateTimeRangeSlider. The StepDuration property enables discrete selection, as opposed to continuous selection, of values along the slider range. When setting the StepDuration property, you can specify the step value for each date and time component in the order of years, months, days, hours, minutes, and seconds.

We can enable discrete selection of only every 30 minutes along the slider range by setting the "StepDuration" property to "0,0,0,0,30" as per the code snippet.

<sliders:SfDateTimeRangeSlider Minimum="09:00:00" Maximum="17:00:00"

                            RangeStart="10:30:00" RangeEnd="12:30:00"

                            StepDuration="0,0,0,0,30" MinorTicksPerInterval="1"                             

                            Interval="1" IntervalType="Hours" ShowTicks="True"

                            DateFormat="hh:mm" ShowLabels="True">


StepDuration can be set in code behind, as shown below.

sfSlider.StepDuration = new SliderStepDuration(0, 0, 0, 0, 30);

Also visit this documentation for more information:


Best Regards,

FE Ferenc February 17, 2023 09:10 AM UTC

Dear Raja,

thank you so much for your help. I didn't use properly the Stepduration prperty first (U used onlly Stepduration="1") but now I get it and it works as expected! 

Thank you again!



Live Chat Icon For mobile
Up arrow icon