Skip to main content

BootstrapRangeSelector Class

Represents a Bootstrap Range Selector control.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v24.1.dll

NuGet Package: DevExpress.Web.Bootstrap

Declaration

[DXClientDocumentationProviderWeb("BootstrapRangeSelector")]
[ToolboxBitmap(typeof(BootstrapToolboxBitmapAccess), "Bitmaps256.BootstrapRangeSelector.bmp")]
[ToolboxTabName("DX.24.1: Bootstrap Controls")]
public class BootstrapRangeSelector :
    BootstrapWebClientUIWidgetEx

Remarks

A Bootstrap Range Selector control is displayed as a one-dimensional scale with two sliders. An end-user selects the required range by moving the sliders.

Bootstrap_RangeSelector_Class_png

You can configure the following control settings.

Note

The Bootstrap Range Selector control provides you with a comprehensive client-side functionality implemented using JavaScript code:

Example

The following example demonstrates the Bootstrap Range Selector control’s functionality with a chart in the background. Follow the steps below to bind the control to the required data source and set up the control appearance.

  1. Set the data source using either the BootstrapWebClientUIWidget.DataSourceUrl or the BootstrapWebClientUIWidget.DataSourceID property. To get more information, refer to the Binding to Data topic.
  2. Assign the name of the data source field that stores scale values to the BootstrapChartCommonSeriesBase.ArgumentField property.
  3. Create chart series (the BootstrapChartSplineSeries type is used in this example) and specify the data source field - BootstrapChartSeries.ValueField - for each series.

The image below shows the result.

Bootstrap_RangeSelector_Class_example

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/Content/productweight.json" TitleText="Select a Product Weight" >
    <Chart>
        <SettingsCommonSeries ArgumentField="weight" />
        <SeriesCollection>
            <dx:BootstrapChartSplineSeries ValueField="appleCost" >
            </dx:BootstrapChartSplineSeries>
            <dx:BootstrapChartSplineSeries ValueField="orangeCost" >
            </dx:BootstrapChartSplineSeries>
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>
See Also