Getting Started

This section explains briefly on how to create a Radial Slider control in your mobile application.

Create basic mobile layout

Create an HTML file and paste the following template for mobile layout.

  • html
  • <!doctype html>
    <html lang="en">
    <head>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
        <title>RadialSlider</title>
    <link href="http://cdn.syncfusion.com/17.2.0.28/js/mobile/ej.mobile.all.min.css" rel="stylesheet"/>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/17.2.0.28/js/mobile/ej.mobile.all.min.js"></script>
    </head>
    <body>
        <div>
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Radial Slider" data-ej-isrelative="true"></div>
    
            <!--- Adds RadialSlider Element Here  --->
        </div>
    </body>
    </html>

    Add Radial Slider control

    Add the below code to render the Radial Slider

  • html
  •  <div class="radialslider default control">
            <div style="text-align: center">
                <button id="targetButton" data-role="ejmbutton" data-ej-touchend="radialslideropen" data-ej-text="Click here for image zooming"></button>
            </div>
        </div>
        <div id="defaultradialslider" data-role="ejmradialslider" data-ej-autoopen="false" data-ej-position="bottomcenter" data-ej-change="sliderchange" data-ej-slide="sliderchange" data-ej-radius="150" data-ej-ticks="[30,35,40,45,50,55,60,65]" data-ej-value="50"></div>
        <div id="imagezoom">
        </div>
  • js
  • function RadialSliderLoad() {
                if ($("#appList").is(":visible"))
                    $("#defaultradialslider").css("left", parseInt($("#defaultradialslider").css("left")) - 140)
            }
            function radialslideropen(args) {
    
                $("#defaultradialslider").ejmRadialSlider("show");
            }
            function sliderchange(args) {
                $("#imagezoom").css("background-size", args.value + "%")
            }
            function RadialSliderRenderModeLoad() {
                $("#defaultradialslider").ejmRadialSlider({ value: 50, ticks: [30, 35, 40, 45, 50, 55, 60, 65] });
                $("#imagezoom").css("background-size", "50%")
            }