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.

    Image customization

    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.

    Image customization