Getting Started

2 Mar 20171 minute to read

This section helps to get started of the RadialSlider control in a JSP application.

Create a RadialSlider

The following steps guide you to add a RadialSlider control.

Create a new HTML file and include the below scripts and styles for rendering Essential JavaScript controls.

  • html
  • <head>
            <title>JSP Application</title>
            <link href="http://cdn.syncfusion.com/**19.3.0.43**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
            <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
            <script src="http://cdn.syncfusion.com/**19.3.0.43**/js/web/ej.web.all.min.js" type="text/javascript"></script>
        </head>

    NOTE

    Note: For further reference, refer the common JSP Getting Started Documentation to create an application and add necessary scripts and styles for rendering our control.

    Create a simple RadialSlider by adding ej:radialSlider tag for initializing an empty RadialSlider control on the application.

  • html
  • <ej:radialSlider id="radialslider"></ej:radialSlider>

    Image Configuration

    You can customize the center image for RadialSlider using innerCircleImageUrl property, by setting an image URL to it.

  • html
  • <ej:radialSlider id="radialslider" innerCircleImageUrl="Content/images/radialslider/chevron-right.png"></ej:radialSlider>

    NOTE

    Note: You can find the RadialSlider control properties from the API reference document