Numeric Scale

The Continuous scale type is used by default when the scale displays numeric or date-time values.

Select a Product Weight
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/productweight.json" SelectionStart="1" SelectionEnd="2" TitleSettings-Text="Select a Product Weight">
    <SettingsScale Type="Continuous" ValueType="System.Decimal" TickInterval="1" />
        <SettingsCommonSeries ArgumentField="weight" />
            <dx:BootstrapChartSplineSeries ValueField="appleCost" CssClass="apple-series" />
            <dx:BootstrapChartSplineSeries ValueField="orangeCost" CssClass="orange-series" />

Date-Time Scale

This demo illustrates the use of a date-time scale. In this example, the SettingsScale.MinRange and SettingsScale.MaxRange properties are set to prevent an end-user from selecting a vacation period shorter than a week and longer than 31 days. To select a specific month, click between the corresponding scale markers.

Select a Vacation Period
<dx:BootstrapRangeSelector runat="server" SelectionStart="2017/1/5" SelectionEnd="2017/2/1" TitleSettings-Text="Select a Vacation Period">
    <SettingsScale Type="Continuous" ValueType="System.DateTime" StartValue="2017/1/1" EndValue="2017/6/30"
        RangeIntervalUnit="Day" MinRange="7" MaxRange="31"
        TickIntervalUnit="Week" TickInterval="1"
        MinorTickIntervalUnit="Day" MinorTickInterval="1" MinorTickVisible="false" />

Logarithmic Scale

In this demo, a logarithmic scale is used to display a range of rapidly growing values. Each scale tick represents a number (logarithm base) raised to a power. You can specify the logarithm base using the SettingsScale.LogarithmBase option.

<dx:BootstrapRangeSelector ID="LogarithmicRangeScale" runat="server">
    <SettingsScale Type="Logarithmic" MinRange="1" MinorTickCount="10">
            <Format Type="Exponential" />
        <Format Type="Exponential" />
protected void Page_Load(object sender, EventArgs e) {
    Random randNumber = new Random();
    var data = Enumerable.Range(0, 100).Select(i =>
        new { arg = Math.Pow(10, i * 0.1), val = Math.Log10(i + 1) / Math.Log10(0.5) + (randNumber.NextDouble() - 0.5) * (100 / (i + 1)) + 10 }).ToArray();
    LogarithmicRangeScale.DataSource = data;

Discrete Scale

The Discrete scale type is used to select a range within a set of categories defined by string values.

Total: $111,558
Seafood Sales
<dx:BootstrapRangeSelector runat="server" DataSourceID="SeafoodSalesDataSource" TitleSettings-Text="Seafood Sales">
    <SettingsScale Type="Discrete">
        <Label OverlappingBehavior="None" />
    <ClientSideEvents ValueChanged="onDiscreteValueChanged" />
function onDiscreteValueChanged(s, e) {
    var data = s.GetDataSource().items(),
        total = 0,
    $.each(data, function(i, item){
        if (item.ProductName == e.value[0] )
            startIndex = i;
        else if (item.ProductName == e.value[1])
            endIndex = i;
    if(endIndex) {
        data.slice(startIndex, endIndex + 1).forEach(
            function(item) {
                total += item.ProductSales;
    } else {
        total = data[startIndex].ProductSales;
    $("#total").text(Globalize.formatCurrency(total, "USD", { maximumFractionDigits: 0 }));

Semidiscrete Scale

The Semidiscrete scale type provides the discrete representation of continuous data. This scale type requires the SettingsScale.MinRange property to be set.

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/RangeSelector/semidiscrete.json">
    <SettingsScale Type="Semidiscrete" ValueType="System.Decimal" StartValue="0" EndValue="100" MinRange="5"/>
            <dx:BootstrapChartBarSeries />
Screen Size
Color Themes
Demo QR Code