Display Angle Support

Start Angle

The RadialSlider property startAngle allows you to change the start angle level of the RadialSlider. By default, the Radial Slider start angle is set as 0. Refer to the following code example.

Add the following code in your HTML page to render the RadialSlider.

  • html
  • <ej-radialslider [radius]="radius" [innerCircleImageUrl]="imageurl" [startAngle]="startangle">
        </ej-radialslider>

    Add the following code in constructor file.

  • javascript
  • export class AppComponent {
            radius: number;
            imageurl:any;
            startangle:any;
            constructor() {
                this.radius = 100;
                this.imageurl= "http://js.syncfusion.com/demos/web/content/images/radialslider/chevron-right.png";
            this.startangle=20;
            }
        }

    The following screenshot illustrates the output of the above code.

    https://help.syncfusion.com/js/radialslider/display-angle-settings_images/display-angle-settings_images_img1.png

    End Angle

    The RadialSlider property endAngle allows you to change the end angle level of the RadialSlider. By default, the Radial Slider end angle is set as 360. Refer to the following code example.

    Add the following code in your HTML page to render the RadialSlider.

  • html
  • <ej-radialslider [radius]="radius" [innerCircleImageUrl]="imageurl" [endAngle]="endangle">
        </ej-radialslider>

    Add the following code in constructor file.

  • javascript
  • syncApp.controller('radialSliderCtrl', function ($scope) {
            $scope.endangle = 300;
        });

    The following screenshot illustrates the output of the above code.

    https://help.syncfusion.com/js/radialslider/display-angle-settings_images/display-angle-settings_images_img2.png