Getting Started

2 Nov 20161 minute to read

This section helps you to understand the getting started of the RadialSlider component with the step-by-step instructions

Create a simple Radial Slider

Refer the common React’s Getting Started Documentation to create an application and add necessary scripts and styles for rendering our React JS components.

Create a JSX file for rendering RadialSlider component using <EJ.RadialSlider> syntax. Add required properties to it in <EJ. RadialSlider > tag element

JAVASCRIPT

ReactDOM.render(   
        <EJ.RadialSlider id="defaultslider" radius={150} innerCircleImageUrl="http://js.syncfusion.com/demos/web/content/images/radialslider/chevron-right.png">
        </EJ.RadialSlider>,
        document.getElementById('RadialSlider-default')  
    );

Define an HTML element for adding RadialSlider in the application and refer the JSX file created with script type “text/babel”.

HTML

<div id="RadialSlider-default"></div>
    <script type="text/babel" src="sample.jsx">

This will render a RadialSlider component on executing.

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