Getting Started

29 Nov 20163 minutes to read

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">
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link href="" rel="stylesheet"/>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
        <div id="header" data-role="ejmnavigationbar" data-ej-title="Radial Slider" data-ej-isrelative="true"></div>
            <!--- Adds RadialSlider Element Here  --->

    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 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">
  • js
  • function RadialSliderLoad() {
                if ($("#appList").is(":visible"))
                    $("#defaultradialslider").css("left", parseInt($("#defaultradialslider").css("left")) - 140)
            function radialslideropen(args) {
            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%")