For this setup, copy the below and replace question text, question label and rows accordingly.

  <radio 
   label="MX14"
   grouping="rows"
   rowLegend="both"
   uses="leftright.1">
    <title>Please rate your experience with us.
</title>
    <col label="c1">1</col>
    <col label="c2">2</col>
    <row label="r1" rightLegend="Poor">Great</row>
    <row label="r2" rightLegend="Expensive">Economical</row>
    <row label="r3" rightLegend="Hard">Easy</row>
    <row label="r5" rightLegend="Slow">Fast</row>
    <style name="question.after"><![CDATA[
<style type="text/css">
.slidecontainer {
  width: 100%;
}
.slidecontainer>table>tbody>tr>td:nth-child(1) {
    width: 15%;
    text-align: right;
    padding-right: 5px;
}
.slidecontainer>table>tbody>tr>td:nth-child(2) {
    width: 70%;
}
.slidecontainer>table>tbody>tr>td:nth-child(3) {
    width: 15%;
    text-align: left;
    padding-left: 5px;
}


.sliderS {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
     margin-top: 15px;
    margin-bottom: 15px;

}

.v:hover {
  opacity: 1;
}

.sliderS::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: gray;
  cursor: pointer; 
    border-radius: 50%;
}

.sliderS::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: blue;
  cursor: pointer;
}
.answers-table
{
display:none;
}
   </style>
]]></style>
    <style name="question.after" wrap="ready"><![CDATA[
var qn = ${jsexport()}; 		 					//returns json object of the question
    console.log(qn);								//loads question variables into a console tool
var resp_id=qn.uid;

jQuery(".answers").after('<div class="slidecontainer"><table width="100%"><tbody></tbody></table></div>');

var k=1;
jQuery(".answers table.grid > tbody:nth-child(2) > tr").each(function(){
var left_row=jQuery(this).children("th:nth-child(1)").text();
var right_row=jQuery(this).children("th:nth-child(4)").text();
jQuery(".slidecontainer > table > tbody").append("<tr><td>"+left_row+"</td><td><input type='range' min='0' max='2' value='1' class='sliderS' id='myRange"+k+"'></td><td>"+right_row+"</td></tr>");

k++;
});

setInterval(function(){
for(var i=1;i<k;i++)
{
var t=i-1;
var c_val=parseInt(jQuery("#myRange"+i).val());
if(c_val==0){
jQuery(".answers-table table input[name='ans"+resp_id+".0."+t+"'][value='0']").prop( "checked",true );
}
else if(c_val==2){
jQuery(".answers-table table input[name='ans"+resp_id+".0."+t+"'][value='1']").prop( "checked",true );
}
else
{
jQuery(".answers-table table input[name='ans"+resp_id+".0."+t+"'][value='0']").prop( "checked",false );
jQuery(".answers-table table input[name='ans"+resp_id+".0."+t+"'][value='1']").prop( "checked",false );
}

}


},100);
]]></style>
  </radio>