Image customization

Customizing inner circle

Using Class

The RadialSlider property e-innerCircleimageclass allow to set image for the inner circle of the RadialSlider. By default, the Radial Slider innerCircleImageClass is set as “null”. Refer to the following code example.

HTML

<div id="angularRadialSlider" ej-radialslider e-innercircleimageclass="imageClass" ></div>

JS

syncApp.controller('radialSliderCtrl', function ($scope) {
        $scope.imageClass = "myClass";
    });

CSS

.myClass {

        background-image : url("http://js.syncfusion.com/UG/Mobile/Content/sent.png");
    }

The following screenshot illustrates the output of above code.

Using image URL

The RadialSlider property [e-innercircleimageurl] allow to set URL image to the inner circle of the RadialSlider. By default, the Radial Slider [innercircleimageurl] is set as “null”. Refer to the following code example.

HTML

<div id="angularRadialSlider" ej-radialslider innercircleimageurl="imageUrl"></div>

JS

syncApp.controller('radialSliderCtrl', function ($scope) {
        $scope.imageUrl = "http://js.syncfusion.com/demos/web/content/images/radialslider/chevron-right.png";
    });

The following screenshot illustrates the output of above code.