Your search did not match any results.

Image on Background

Documentation

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

Backend API
@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Top(50) .Bottom(0) ) .Background(b => b .Image(i => i .Url(Url.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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult ImageOnBackground() { return View(); } } }
#range-selector { height: 300px; }