scale tick

Specifies options defining the appearance of scale ticks.

Type: Object

Show Example:
jQuery

In this example, the tick appearance options are changed.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 10,
            tick: {
                color: 'royalblue',
                opacity: 1,
                width: 2
            }
        }
    });
});

color

Specifies the color of scale ticks (both major and minor ticks).

Type: String
Default Value: '#000000'

This option supports the following colors.

Show Example:
jQuery

In this example, the scale ticks are colored in blue. To make the difference in color clearer, the opacity has been disabled.

<div id="rangeSelectorContainer" style="height:120px;max-width:600px;margin:0px auto"></div>
$(function () {
    $("#rangeSelectorContainer").dxRangeSelector({
        scale: {
            startValue: 0,
            endValue: 10,
            tick: {
                color: 'blue',
                opacity: 1
            }
        }
    });
});

opacity

Specifies the opacity of scale ticks (both major and minor ticks).

Type: Number
Default Value: 0.1

Show Example:
jQuery

In this example, the scale ticks' opacity option is set to 0.5.

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

width

Specifies the width of the scale's ticks (both major and minor ticks).

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, the scale ticks' width option is changed to 2.

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