Your search did not match any results.
Range Selector

Image on Background

Documentation
This demo demonstrates how to customize the RangeSelector appearance by specifying an image as a background view.
<div class="demo-container"> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Top(50) .Bottom(0) ) .Background(b => b .Image(i => i .Url("../../Content/images/RangeImage/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, 8, 29)) .EndValue(new DateTime(2012, 8, 30)) .MinorTickInterval(m => m.Hours(1)) .PlaceholderHeight(20) .Label(l => l.Format(Format.ShortTime)) ) .Value(new DateTime[] { new DateTime(2012, 8, 29, 11, 0, 0), new DateTime(2012, 8, 29, 17, 0, 0) }) .Title("Select a Time Period") ) </div> <script> $(function() { var selector = $("#range-selector").dxRangeSelector("instance"); var width = selector.element().width(); var height = (width - 140) / 4 + 100; selector.element().height(height); selector.render(); }); </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult ImageOnBackground() { return View(); } } }
#range-selector { height: 440px; width: 100%; }