Background Image

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

Select a Time Period
Select a Time Period8:00 AM5:00 PM12:00 AM2:00 AM4:00 AM6:00 AM8:00 AM10:00 AM12:00 PM2:00 PM4:00 PM6:00 PM8:00 PM10:00 PM12:00 AM29Wednesday, 30Select 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>
    <SettingsSliderMarker PlaceholderHeight="30">
        <Format Type="ShortTime" />
    </SettingsSliderMarker>
        </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
Select a Lead Concentration in Water0.0046 mg/L0.0498 mg/L0.005 mg/L0.010 mg/L0.015 mg/L0.020 mg/L0.025 mg/L0.030 mg/L0.035 mg/L0.040 mg/L0.045 mg/LSelect 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>
    <SettingsBehavior SnapToTicks="false" />
</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
Select a Range in the CPU Usage History270 s1 s2 s3 s4 s5 s6 s7 s8 s9 s10 s11 s12 s13 s14 s15 s16 sSelect 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" />
    <SettingsSliderMarker Visible="false" />
    <SettingsScale ValueType="System.Decimal" TickInterval="1" MinorTickInterval="0.5">
        <Label OnClientCustomizeText="customizeLabelText" />
    </SettingsScale>
</dx:BootstrapRangeSelector>
function customizeLabelText(scaleValue){
    return scaleValue.valueText + " s";
}

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
Select a Year Period197020091,9701,9721,9741,9761,9781,9801,9821,9841,9861,9881,9901,9921,9941,9961,9982,0002,0022,0042,0062,008Select 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
Client-Side API