Getting Started

25 Nov 2016 / 1 minute to read

This section helps to get started of the Slider component in a React application

Create a Slider

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

Create a JSX file and use <EJ.Slider> syntax to render React Slider component. Add required properties to <EJ.Slider> tag element.

  • html
    • ReactDOM.render(   
        <EJ.Slider>
        </EJ.Slider>,
        document.getElementById('default-slider')  
    );

    Define an HTML element for adding Slider in the application and refer the JSX file created.

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

    This will render an default Slider component on executing.

    Configure Properties

    In the JSX, need to declare the Slider properties. Refer to the following code,.

  • html
    • ReactDOM.render(   
        <EJ.Slider value={20} >
        </EJ.Slider>,
        document.getElementById('default-slider')
    );

    Run the above code to render the following output,

    Note: You can find the Slider properties from the API reference document.