Configuration behavior

Specifies the dxRangeSelector's behavior options.

Type: Object

Show Example:
jQuery

In this example, a number of options belonging to the behavior configuration object are changed. Particularly, the snapToTicks option is set to 'false', so the dxRangeSelector's sliders do not dock to the scale ticks. These sliders cannot swap their places as the allowSlidersSwap option is also set to 'false'. In addition, widget animation is disabled by setting the animationEnabled option to 'false'.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 10
        },
        behavior: {
            animationEnabled: false,
            snapToTicks: false,
            allowSlidersSwap: false
        }
    });
});

allowSlidersSwap

Indicates whether or not you can swap sliders.

Type: Boolean
Default Value: true

When this property is set to true, you can move a slider to the required scale value by crossing over the other slider. When this property is set to false, you can only move a slider to the other slider's position.

Show Example:
jQuery

Toggle the check box to switch between the values of the allowSlidersSwap option. To see the effect, pull a slider through the other slider.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:150px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="allowSlidersSwapCheckbox" checked> allowSlidersSwap
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 8, 29, 00, 00, 00),
            endValue: new Date(2012, 8, 29, 24, 00, 00),
            placeholderHeight: 20
        }
    });

    $("#allowSlidersSwapCheckbox").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            behavior: { allowSlidersSwap: this.checked }
        });
    });
});

animationEnabled

Indicates whether or not animation is enabled.

Type: Boolean
Default Value: true

To make a selected range and chart series move smoothly when required, enable animation by setting the animationEnabled property to true.

Show Example:
jQuery

In this example, widget animation is disabled using the animationEnabled option. You can use the moveSelectedRangeByClick feature to see the difference.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 10
        },
        behavior: {
            animationEnabled: false
        }
    });
});

callSelectedRangeChanged

Specifies when to call the onSelectedRangeChanged function.

Type: String
Default Value: 'onMovingComplete'
Accepted Values: 'onMovingComplete' | 'onMoving'

Show Example:
jQuery

In this example, you can change the callSelectedRangeChanged option using the drop-down menu below. When this option is set to 'onMovingComplete', the function assigned to the onSelectedRangeChanged field will be called after you complete moving the sliders. When the callSelectedRangeChanged option is set to 'onMoving', this function will be called upon every move of the sliders regardless of its completion.

<div id="rangeSelectorContainer" style="height:120px;max-width:1000px;margin:0px auto"></div>
<div id="selectContainer" style="height:50px;width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan">
        callSelectedRangeChanged:
        <select id="dropdownListSelector">
            <option value="onMoving">onMoving</option>
            <option value="onMovingComplete">onMovingComplete</option>
        </select>
    </span><br />
    <span id="workingDaysDisplay" />
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2011, 0, 1),
            endValue: new Date(2011, 11, 31),
            minorTickInterval: 'day',
            tickInterval: 'month',
            showMinorTicks: false,
            marker: { visible: false },
            label: {
                format: 'MMM'
            }
        },
        behavior: {
            callSelectedRangeChanged: "onMoving"
        },
        sliderMarker: {
            format: 'MMM dd, ddd'
        },
        onSelectedRangeChanged: function (e) {
            var currentDate = new Date(e.startValue);
            var workingDaysCount = 0;

            while (currentDate <= e.endValue) {
                if (currentDate.getDay() != 0 && currentDate.getDay() != 6) {
                    workingDaysCount++;
                }
                currentDate.setDate(currentDate.getDate() + 1);
            }
            $("#workingDaysDisplay").html("<b>Working days in total:</b> " + workingDaysCount);
        }
    });

    $("#dropdownListSelector").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            behavior: { callSelectedRangeChanged: this.value }
        });
    });
});

manualRangeSelectionEnabled

Indicates whether or not an end user can specify the range using a mouse, without the use of sliders.

Type: Boolean
Default Value: true

When this property is set to true, you can select the desired range using a mouse selection, and the sliders will be positioned at the start and end points of your selection.

Show Example:
jQuery

Toggle the check box to change the manualRangeSelectionEnabled option. If this option is set to 'true', you can select a range without the use of sliders. To do this, press the left mouse button at one end of the required range and release it at another.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin: 0px auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="manualRangeSelectionCheckbox" checked> manualRangeSelectionEnabled
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 8, 29, 00, 00, 00),
            endValue: new Date(2012, 8, 29, 24, 00, 00),
            placeholderHeight: 20
        }
    });

    $("#manualRangeSelectionCheckbox").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            behavior: { manualRangeSelectionEnabled: this.checked }
        });
    });
});

moveSelectedRangeByClick

Indicates whether or not an end user can shift the selected range to the required location on a scale by clicking.

Type: Boolean
Default Value: true

When this property is set to true, you can click anywhere on an unselected area and the currently selected range will shift to the position that was clicked.

Show Example:
jQuery

Toggle the check box to change the moveSelectedRangeByClick option. If this option is set to 'true', you can move the selected range by clicking it. Select a range and click the unselected area.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="moveSelectedRangeByClickCheckbox" checked> moveSelectedRangeByClick
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 8, 29, 00, 00, 00),
            endValue: new Date(2012, 8, 29, 24, 00, 00),
            placeholderHeight: 20
        }
    });

    $("#moveSelectedRangeByClickCheckbox").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            behavior: { moveSelectedRangeByClick: this.checked }
        });
    });
});

snapToTicks

Indicates whether to snap a slider to ticks.

Type: Boolean
Default Value: true

When this property is set to true, the slider docks to the nearest tick. The slider marker always displays the value of the nearest tick.

When this property is set to false, the slider will stay in the position in which it was dropped. The slider marker always displays the current scale value.

Show Example:
jQuery

Toggle the check box to change the snapToTicks option. Move the sliders to see the difference.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
<div id="checkboxContainer" style="height:40px;max-width:250px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="snapToTicksCheckbox" checked> snapToTicks
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: new Date(2012, 8, 29, 00, 00, 00),
            endValue: new Date(2012, 8, 29, 24, 00, 00),
            placeholderHeight: 20
        },
        behavior: {
            snapToTicks: true
        }
    });

    $("#snapToTicksCheckbox").change(function () {
        var rangeSelector = $("#rangeSelectorContainer").dxRangeSelector("instance");
        rangeSelector.option({
            behavior: { snapToTicks: this.checked }
        });
    });
});