Behavior settings

The following are some properties that enables you to an option to enhance the behavior of RadialSlider control.

Show/hide RadialSlider on initial rendering

The RadialSlider property autoOpen allow you to make the control visible on initial rendering. By default, the value of the property is set as true. Setting it as false will hide the control on initial rendering.

  • html
  • <div id="radialSlider"> </div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module RadialSliderComponent {
        $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
                 innerCircleImageUrl: "chevron-right.png",
                 autoOpen:false 
        });
      });
    }

    Value accuracy

    The RadialSlider property enableRoundOff allow to show the rounded off value when user changes it. By default, the value of the property is set as true. For accurate values, you can set this as false.

  • html
  • <div id="radialSlider"> </div>
  • js
  • /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module RadialSliderComponent {
        $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
                    innerCircleImageUrl: "chevron-right.png",
                    enableRoundOff:false 
            });
        });
    }

    Display inline

    The RadialSlider property inline is used to show the control values inline of the slider. By default, the value of the property is set as false.

  • html
  • <div id="radialSlider"> </div>
  • js
  • $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
              innerCircleImageUrl: "chevron-right.png",
              inline:true 
            });
        });

    Modifying Label Space

    The RadialSlider property labelSpace allow to define the space of label in it. By default, the RadialSlider labelSpace is set as 30. Refer to the following code example.

  • html
  • <div id="radialSlider"> </div>
  • js
  • $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
                     innerCircleImageUrl: "chevron-right.png",
                     labelSpace:40
       });
    });

    The following screenshot shows the output for the above code example.

    Show/Hide inner circle

    The RadialSlider property showInnerCircle allow to show or hide the inner circle of the RadialSlider.By default,Value of the property is set as true and type of the property is Boolean.

  • html
  • <div id="radialSlider"> </div>
  • js
  • $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
                    innerCircleImageUrl: "chevron-right.png",
                    showInnerCircle:false
             });
       });

    The following screenshot shows the output for the above code example.

    Values customization

    The RadialSlider property ticks allow to set an array of a numeric value which will be displayed in it. By Default RadialSlider ticks value is a set to an array of length 11 as following,

    ticks = { 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 }. You can refer the below code for reference.

  • html
  • <div id="radialSlider"> </div>
  • js
  • $(function () {
              var radialsliderInstance = new ej.RadialSlider($("#radialSlider"), {
                    innerCircleImageUrl: "chevron-right.png",
                    ticks:[100,200,300,400,500,600,700,800,900,1000],
                    value:100 
            });
        });

    The following screenshot shows the output for the above code example.