Configuration indent

Range selector's indent options.

Type: Object

The indent is used to precisely align scales of several widgets arranged vertically. This is the distance between the container edge and the range selector's scale (see the image below).

RangeSelectorMargin ChartJS

Note that if the indent is set very small, the Scale Labels will be cut.

Show Example:
jQuery

Move the sliders at the bottom to change the range selector's left and right indent values.

<div id="rangeSelectorContainer" style="height:70px;max-width:600px;margin: 0px auto;border: 1px dotted black"></div>

<div style="text-align:center">
	<div id="slidersContainer" style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:left">
		<div style="width:200px; display: inline-block;" id="sliderL"></div>
		Left indent: <div style="display: inline-block;" id="sliderLValue">0</div>
		<br>
		<div style="width:200px; display: inline-block;" id="sliderR"></div>
		Right indent: <div style="display: inline-block;" id="sliderRValue">0</div>
	</div>
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        indent: {
            left: 0,
            right: 0
        }
    });

    $("#sliderL").dxSlider({
        min: 0,
        value: 3,
        max: 200,
        onValueChanged: function (e) {
            $('#sliderLValue').html(e.value);
            var rangeSelector = $('#rangeSelectorContainer').dxRangeSelector('instance');
            rangeSelector.option("indent.left", e.value);
        }
    });

    $("#sliderR").dxSlider({
        min: 0,
        value: 3,
        max: 200,
        onValueChanged: function (e) {
            $('#sliderRValue').html(e.value);
            var rangeSelector = $('#rangeSelectorContainer').dxRangeSelector('instance');
            rangeSelector.option("indent.right", e.value);
        }
    });
})

left

Specifies range selector's left indent.

Type: Number
Default Value: undefined
Cannot be used in themes.

Show Example:
jQuery

Move the slider at the bottom to change the range selector's left indent value.

<div id="rangeSelectorContainer" style="border: 1px dotted black;height:70px;max-width:600px;margin: 0px auto"></div>

<div id="sliderContainer" style="height:60px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Left indent: <div style="display: inline-block;" id="sliderValue">0</div>
    <div id="slider"></div>
</div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 1
        },
        indent: {
            left: 0
        }
    });

    $("#slider").dxSlider({
        min: 0,
        value: 3,
        max: 200,
        onValueChanged: function (e) {
            $('#sliderValue').html(e.value);
            var rangeSelector = $('#rangeSelectorContainer').dxRangeSelector('instance');
            rangeSelector.option("indent.left", e.value);
        }
    });
})

right

Specifies range selector's right indent.

Type: Number
Default Value: undefined
Cannot be used in themes.

Show Example:
jQuery