For this setup, copy the below and update the row, question label, question text accordingly.

  <number 
   label="q5"
   ignoreValues="999"
   optional="0"
   size="10"
   uses="slidernumber.5"
   verify="range(0,10)">
    <title>Please Rate these online Shopping portal based on user experience.<br/><i>Where 1 is lowest and 10 is highest</i></title>
    <comment><table width="100%" class="ans_con">
<tbody>

</tbody>
</table></comment>
    <row label="r1"><img class="imgx" src="/survey/selfserve/560/200209/amazon_logo2_w800.jpg" title="Amazon" /></row>
    <row label="r2"><img class="imgx" src="/survey/selfserve/560/200209/flipkart_logo2.jpg" title="Flipkart" /></row>
    <row label="r3"><img class="imgx" src="/survey/selfserve/560/200209/jabong_logo2.png" title="Jabong" /></row>
    <row label="r4"><img class="imgx" src="/survey/selfserve/560/200209/myntra_logo2.png" title="Myntra" /></row>
    <row label="r5"><img class="imgx" src="/survey/selfserve/560/200209/snapdeal_logo2.jpg" title="Snapdeal" /></row>
    <style name="question.after"><![CDATA[
<style type="text/css">
  table.ans_con {
    max-width: 800px;
    margin: 0 auto;
}
table.ans_con>tbody>tr>td:nth-child(2) {
    width: 60%;
    padding-left: 10px;
}
table.ans_con>tbody>tr>td:nth-child(1) {
    width: 20%;
}
table.ans_con>tbody>tr>td:nth-child(3) {
    width: 20%;
}
slidernumber {
    box-shadow: 0px 0px 0px !important;
    pointer-events: none;
}
table.ans_con td {
  padding-top: 15px;
    padding-bottom: 15px;
}
.imgx
{
    width: 90%;
}
.answers {
    display: none;
}
.text-input {
    line-height: 1.5 !important;
}
  </style>
]]></style>
    <style name="question.after" wrap="ready"><![CDATA[
document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'complete') {
  
  var w_width=jQuery(".survey-body").width();
  
  if(w_width>600){
var k=1;
jQuery(".sq-slidernumber-container").each(function(){

jQuery(".ans_con > tbody").append("<tr class='row_"+k+"'><td></td><td></td><td></td></tr>");
jQuery(".row_"+k+" > td:nth-child(1)").append(jQuery(this).find(".sq-slidernumber-row-legend").html());
jQuery(".row_"+k+" > td:nth-child(2)").append(jQuery(this).find(".ui-slider"));
jQuery(".row_"+k+" > td:nth-child(3)").append(jQuery(this).find(".slidernumber_input"));
k++;
});
}
else
{
var k=1;
jQuery(".sq-slidernumber-container").each(function(){

jQuery(".ans_con > tbody").append("<tr class='row_"+k+"'><td align=center></td></tr>");
jQuery(".ans_con > tbody").append("<tr class='row_a"+k+"'><td align=center></td></tr>");
jQuery(".ans_con > tbody").append("<tr class='row_ax"+k+"'><td align=center></td></tr>");
jQuery(".row_"+k+" > td:nth-child(1)").append(jQuery(this).find(".sq-slidernumber-row-legend").html());
jQuery(".row_a"+k+" > td:nth-child(1)").append(jQuery(this).find(".ui-slider"));
jQuery(".row_ax"+k+" > td:nth-child(1)").append(jQuery(this).find(".slidernumber_input"));
k++;
});
}
}
}
]]></style>
  </number>