jQWidgets jqxSwitchButton thumbSize Property

Last Updated : 04 Oct, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxSwitchButton is used to illustrate a jQuery button widget that changes its verified state after being clicked. Moreover, it’s quite identical to the jqxToggleButton, yet possesses a distinct user interface view.

The thumbSize property is used to set or get the thumb’s size in percentages. It is of type string and its default value is “40%”.

Syntax:

To set the thumb size property.

$('Selector').jqxSwitchButton({ thumbSize:'50%' });

To get the thumb size property.

var thumbSize = $('Selector').jqxSwitchButton('thumbSize');

Linked Files: Download https://www.jqwidgets.com/download/ from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jqwidgets/styles/jqx.base.css”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/styles/jqx.energyblue.css”></script>

The below example illustrates the jqxSwitchButton thumb-size property in jQWidgets.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <link
      rel="stylesheet"
      href="jqwidgets/styles/jqx.base.css"
      type="text/css"
    /> 
    <script type="text/javascript" 
        src="jqwidgets/styles/jqx.base.css"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/styles/jqx.energyblue.css"></script> 
  </head> 
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3>jQWidgets jqxSwitchButton thumbSize property</h3> 
      <br /> 
      <div id="jqxSB"></div> 
      <div id="log"></div> 
    </center> 
  
    <script type="text/javascript"> 
      $(document).ready(function () { 
        $("#jqxSB").jqxSwitchButton({ 
          height: "30px", 
          width: "80px", 
          thumbSize: "20%", 
        }); 
      }); 
      $("#jqxSB").on("checked", function () { 
          var ts = $("#jqxSB").jqxSwitchButton("thumbSize"); 
          $("#log").html("Size of thumb: " + ts); 
        }); 
    </script> 
  </body> 
</html> 