Background Image

The SettingsBackground property provides access to options related to the range selector's background.

Select a Time Period
<dx:BootstrapRangeSelector runat="server" SelectionStart="2017/8/29 08:00:00" SelectionEnd="2017/8/29 17:00:00" TitleSettings-Text="Select a Time Period">
   <SettingsBackground ImageUrl="../images/RangeImage.png" ImageLocation="Full" />
   <SettingsScale ValueType="System.DateTime" StartValue="2017/8/29 00:00:00" EndValue="2017/8/30 00:00:00"
       TickIntervalUnit="Hour" TickInterval="2" MinorTickIntervalUnit="Minute" MinorTickCssClass="minor-tick" MinorTickInterval="30" PlaceholderHeight="20">
       <Label>
           <Format Type="ShortTime" />
       </Label>
   </SettingsScale>
</dx:BootstrapRangeSelector>

Text Formatting

This demo illustrates how you can apply custom text formatting to various elements of the Range Selector control.

In this demo, the format of the text displayed by the slider marker is customized using a client callback function assigned to the SettingsSliderMarker.OnClientCustomizeText property.

In the same way, custom formatting is applied to scale labels. Additionally, the SettingsScale.Label.Format.Precision property is used to specify the precision of the displayed values.

Select a Lead Concentration in Water
<dx:BootstrapRangeSelector runat="server" TitleSettings-Text="Select a Lead Concentration in Water">
    <SettingsSliderMarker OnClientCustomizeText="customizeMarkerText">
        <Format Type="FixedPoint" Precision="4" />
    </SettingsSliderMarker>
    <SettingsScale ValueType="System.Double" StartValue="0.004563" EndValue="0.04976" TickInterval="0.005" MinorTickInterval="0.001">
        <Label OnClientCustomizeText="customizeMarkerText">
            <Format Type="FixedPoint" Precision="3" />
        </Label>
    </SettingsScale>
</dx:BootstrapRangeSelector>
function customizeMarkerText(scaleValue){
    return scaleValue.valueText + " mg/L";
}

Background Chart

The Range Selector control can display a data-bound chart on top of the background. You can configure the displayed chart using the Chart property. To show the chart without a background, set the SettingsBackground.Visible property to false.

Select a Range in the CPU Usage History
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/cpuusage.json" SelectionStart="2" SelectionEnd="7" TitleSettings-Text="Select a Range in the CPU Usage History">
    <Chart TopIndent="0.05" BottomIndent="0.05">
        <SeriesCollection>
            <dx:BootstrapChartLineSeries ArgumentField="x" ValueField="y" CssClass="cpu-series" />
        </SeriesCollection>
    </Chart>
    <SettingsBackground CssClass="cpu-range-background" />
    <CssClasses Control="cpu-range" />
</dx:BootstrapRangeSelector>

Chart Series Template

This demo illustrates the capability of the Range Selector to display the Chart with series customized using a series template. The Chart.SettingsSeriesTemplate.OnClientCustomizeSeries property specifies a callback function that returns a series object with individual series settings.

Select a Year Period
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/oil.json" TitleSettings-Text="Select a Year Period">
    <Chart TopIndent="0.05" BottomIndent="0.05">
        <SettingsSeriesTemplate NameField="country" OnClientCustomizeSeries="customizeSeries" />
        <SettingsCommonSeries ArgumentField="year" ValueField="oil" Type="Spline" />
    </Chart>
    <SettingsScale ValueType="System.Decimal" StartValue="1970" TickInterval="1" MinorTickInterval="1" MinorTickVisible="false" />
</dx:BootstrapRangeSelector>
function customizeSeries(valueFromNameField){
     return valueFromNameField === "USA" ? { color: "red" } : {};
}
Screen Size
Color Themes
Demo QR Code