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.
@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m .Top(50) .Bottom(0) ) .Background(b => b .Image(i => i .Url(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, 9, 29)) .EndValue(new DateTime(2012, 9, 30)) .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") ) <script> $(function() { var rangeSelector = $("#range-selector").dxRangeSelector("instance"); var width = rangeSelector.element().width(); rangeSelector.option('size', { height: (width - 140) / 4 + 100 }); }); </script>
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: 440px; width: 100%; }