Range Selector - Image on Background

This demo demonstrates how to customize the RangeSelector appearance by specifying an image as a background view.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Top(50) .Bottom(0) ) .Background(b => b .Image(i => i .Url(Url.Content("~/Content/images/RangeSelector/Background.png")) .Location(BackgroundImageLocation.Full) ) ) .Indent(i => i .Left(65) .Right(65) ) .SliderMarker(s => s .PlaceholderHeight(30) .Format(Format.ShortTime) ) .Scale(s => s .StartValue(new DateTime(2012, 9, 29)) .EndValue(new DateTime(2012, 9, 30)) .TickInterval(t=>t.Hours(2)) .MinorTickInterval(m => m.Hours(1)) .PlaceholderHeight(20) .Label(l => l.Format(Format.ShortTime)) ) .Value(new[] { new DateTime(2012, 9, 29, 11, 0, 0), new DateTime(2012, 9, 29, 17, 0, 0) }) .Title("Select a Time Period") )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult ImageOnBackground() { return View(); } } }

#range-selector { height: 300px; }