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: 'white',
                opacity: 1
            }
        }
    });
});

color

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

Type: String
Default Value: '#000000'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the scale ticks are colored in midnightblue.

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

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: 2 }
        }
    });
});