Vue RangeSelector - background.image

Specifies image properties.

Type:

Object

You can display an image as the background of a range selector instead of the default color. Set the image's URL and location using the corresponding properties of the image object to do this.

The width of the specified image must be less than or equal to the UI component's width.

The height of the specified image must be less than or equal to the following value ("-" stands for subtract): the UI component's height - the scale's placeholderHeight.

If the image size is smaller than the background size, a default background color will be displayed in the remaining area. You can set a custom color (e.g. an empty color) for the background using the color property of the background configuration object.

View Demo

location

Specifies a location for the image in the background of a range selector.

Type:

String

Default Value: 'full'
Accepted Values: 'center' | 'centerBottom' | 'centerTop' | 'full' | 'leftBottom' | 'leftCenter' | 'leftTop' | 'rightBottom' | 'rightCenter' | 'rightTop'

If the image does not occupy the entire background area, you can set the required background color to be displayed in the remaining area. Use the color property of the background configuration object to do this.

When using the UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, specify this property using the BackgroundImageLocation enum. This enum accepts the same values, but they start with an upper-case letter, for example, 'leftTop' becomes LeftTop.

url

Specifies the image's URL.

Type:

String

Default Value: undefined