For this question, a float or number question will be implemented using the below code. Additionally, we should also create the same number of slider containers reflecting the number of rows with each having a unique ID, in the below mentioned container.

    <number 
   <div class="sliderContainer">
    <div id= "toolContainer1"></div>
    <div id= "toolContainer2"></div>
	 <div id= "toolContainer3"></div>
	 .
	 .
	 .
	 .
	 .
	 and so on based on number of rows
    </div>
	

Similarly the below function will also be called for each slider / row (this is only applicable in case eac h slider has a distinct theme and parameters). In rest of the cases, a loop can be used where we oinly have to udpate the value for "dataholder" parameter.

     jQuery("#toolContainer1").circleSlider({ 
          length:300,         
          cAll:false,
          theme: "theme1", 
          sLeft:"Less",
          sRight:"More",          
          dataholder : "#"+getQuestionInputId(formData.qType, formData.qid, items[0][0]),
          sTitle:items[1][0],
          sURL    : url,
          arrowImg: "arrow.png",
          backImg : "back.png",
          step:1,
          min:0,
          max:100,
          navigation: '#btn_continue',
          animate:true,
          shwTxtBox:true,
          dkCode : "999",
          dkText : "Don't Know",
          isRTL: false,
          initValue: 20
        });

	

Below is the question with 2 rows with different themes for each (as mentioned in the screenshot above

    <number 
   label="jSL002_1"
   optional="0"
   randomize="0"
   size="4">
    <title>Consider the e-mails or direct mail the following companies currently send you.</title>
    <comment>Please use the dials below or directly change the value from 0-100 in the box to indicate whether you wish to receive more or fewer communications from each company.</comment>
    <row label="r1">Company 1</row>
    <row label="r2">Company 2</row>
    <style name="page.head"><![CDATA[
<style>.answers{display:none;}</style>
]]></style>
    <style cond="1" name="question.after"><![CDATA[
<script type="text/javascript" src="${KEDomain}/core/legacytool/application_decipher_v1.1.js"></script>
    <script type="text/javascript">
    var coffeebeans;
    (function (coffeebeans) {
    if (!coffeebeans.qDefs)
        coffeebeans.qDefs = {};
    coffeebeans.qDefs["${this.label}"] = ${jsexport()};

    $ (document).ready(function(){            
      parseJsexportData();      
    });    
    
    })(coffeebeans || (coffeebeans = {}));  

    </script>

    <script src="${KEDomain}/core/plugins/jquery-ui.js"></script>
    <script src="${KEDomain}/core/plugins/jquery.ui.touch-punch.min.js"></script>    
    <script src="${KEDomain}/core/plugins/raphael-min.js"></script>    

    <script src="${KEDomain}/tools/semi_circle_slider/basicSlider.min.js"></script> 
    <script src="${KEDomain}/tools/semi_circle_slider/circleSlider.min.js"></script> 
    
    <link rel="stylesheet" href="${KEDomain}/core/plugins/jquery-ui.css">
    <link rel="stylesheet" href="${KEDomain}/tools/semi_circle_slider/basicSlider.css">  
    
    <link rel="stylesheet" href="${KEDomain}/tools/semi_circle_slider/circleSlider.css">
    <link rel="stylesheet" href="${KEDomain}/tools/semi_circle_slider/semiCircle_slider.css">    

    <!--[if lt IE 9]>
    <link rel="stylesheet" href="${KEDomain}/tools/semi_circle_slider/circleSliderIE3.css">
    <![endif]-->
    <style>.answers{display:none;} #btn_continue{visibility: hidden;} .sliderContainer { margin-bottom: 40px; }</style>

    <div class="sliderContainer">
    <div id= "toolContainer1"></div>
    <div id= "toolContainer2"></div>
    </div>

    <script>
      jQuery(document).ready(function(){
        var form = getFormName(1);
        var items = getNumericItems(form);
        var formData = kelegacyPageObjDecipher[form];
        var theme = "theme2";
        //pre-loading
        var url = "${KEDomain}/tools/semi_circle_slider/themes/";
        var _imgA = [];
        var _imgs = [url+theme+"/arrow.png",url+theme+"/back.png",url+theme+"/backBlue.png",url+theme+"/cover.png",url+theme+"/strip.png","${KEDomain}/core/images/curve.gif"];
        jQuery.each(_imgs, function(i,x){ _imgA[i] = new Image(); _imgA[i].src = x; });
        

        jQuery("#toolContainer1").circleSlider({ 
          length:300,         
          cAll:false,
          theme: "theme1", 
          sLeft:"Less",
          sRight:"More",          
          dataholder : "#"+getQuestionInputId(formData.qType, formData.qid, items[0][0]),
          sTitle:items[1][0],
          sURL    : url,
          arrowImg: "arrow.png",
          backImg : "back.png",
          step:1,
          min:0,
          max:100,
          navigation: '#btn_continue',
          animate:true,
          shwTxtBox:true,
          dkCode : "999",
          dkText : "Don't Know",
          isRTL: false,
          initValue: 20
        });

        jQuery("#toolContainer2").circleSlider({ 
          length:300,         
          cAll:false,
          theme: theme, 
          sLeft:"Less",
          sRight:"More",          
          dataholder : "#"+getQuestionInputId(formData.qType, formData.qid, items[0][1]),
          sTitle:items[1][1],
          sURL    : url,
          arrowImg: "arrow.png",
          backImg : "backBlue.png",
          step:1,
          min:0,
          max:100,
          navigation: '#btn_continue',
          animate:true,
          shwTxtBox:true,
          dkCode : "999",
          dkText : "Don't Know",
          isRTL: false
        });

        setTimeout(function(){
          jQuery(".arrow").css('-ms-touch-action','none');
        }, 500);
        
        
    });      
      
    </script>
${initkelegacyDataToggle()}
]]></style>
  </number>

  <suspend/>