Range Selector ▸ Background Image

@(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 BackgroundImage() {
            return View();
        }

    }
}

#range-selector {
    height: 300px;
}