diff --git a/UI/testui.htm b/UI/testui.htm
index 54bc8cd6..6fa60ed6 100644
--- a/UI/testui.htm
+++ b/UI/testui.htm
@@ -1,5 +1,14 @@
 <HTML>
 <HEAD>
+<style>
+.sliderthumb{
+position : absolute;
+cursor : pointer;
+ }
+.sliderrange{
+cursor : pointer;
+ }
+</style>
 </HEAD>
 <BODY>
 <script type="text/javascript">
@@ -51,6 +60,119 @@
  var bed_on = 0;
  var ext1_on = 0;
  var ext2_on = 0;
+ 
+ //range functions
+ var offset = 0;
+var isDown = false;
+var active_control = null;
+
+document.addEventListener('mouseup', function() {
+    isDown = false;
+}, true);
+
+//position is based on screen position value 
+function movethumb(pos)
+{
+    var p = pos + offset;
+    var minpos =0;
+    var maxpos = 0;
+    var minvalue =0;
+    var maxvalue = 100;
+    var value=0;
+    var rangeelement =null;
+    if (active_control.hasAttribute('customrange')){
+        rangeelement = document.getElementById(active_control.getAttribute('customrange'));
+        var r = rangeelement.getBoundingClientRect();
+        minpos = r.left;
+        maxpos = r.right;
+         if (rangeelement.hasAttribute('min')){
+             minvalue = parseFloat(rangeelement.getAttribute('min'))
+          }
+        if (rangeelement.hasAttribute('max')){
+             maxvalue = parseFloat(rangeelement.getAttribute('max'))
+          }
+     }
+    var r2 = active_control.getBoundingClientRect();
+    if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
+    if ( p <minpos) p =minpos ;
+    active_control.style.left = p+ 'px';
+    if (active_control.hasAttribute('render')){
+    value = (((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left)))
+    document.getElementById(active_control.getAttribute('render')).value = Math.round(value + minvalue) ;     
+     }  
+}
+
+//position is based on range value 
+function movethumbat(thumbcursor, value){
+    var minvalue =0;
+    var maxvalue = 100;
+    var minpos =0;
+    var maxpos = 0;
+    var rangeelement =null;
+    if (thumbcursor.hasAttribute('customrange')){
+          rangeelement = document.getElementById(thumbcursor.getAttribute('customrange'));
+          var r = rangeelement.getBoundingClientRect();
+          minpos = r.left;
+          maxpos = r.right;
+          if (rangeelement.hasAttribute('min')){
+             minvalue = parseFloat(rangeelement.getAttribute('min'))
+          }
+          if (rangeelement.hasAttribute('max')){
+             maxvalue = parseFloat(rangeelement.getAttribute('max'))
+          }
+     }
+    if (value > maxvalue) value = maxvalue;
+    if (value < minvalue) value = minvalue;
+    var r2 = thumbcursor.getBoundingClientRect();
+    var pos=0;
+    pos = ((value-minvalue)*((maxpos-minpos)-(r2.right-r2.left))/(maxvalue-minvalue))+minpos;
+    thumbcursor.style.left = pos+ 'px';
+    if (thumbcursor.hasAttribute('render')){
+    document.getElementById(thumbcursor.getAttribute('render')).value =value; 
+    }
+}
+
+document.addEventListener('mousemove', function(event) {
+    event.preventDefault();
+    if (isDown) {
+    movethumb(event.clientX);
+    }
+}, true);
+
+function rangeclicked(event,element)
+{
+  
+    if (element.hasAttribute('customthumb')){
+        active_control = document.getElementById(element.getAttribute('customthumb'));   
+        offset = 0;  
+        movethumb(event.clientX);
+        }
+}
+
+function initthumb( element)
+{
+element.addEventListener('mousedown', function(e) {
+    isDown = true;
+    offset = element.offsetLeft - e.clientX;
+    active_control = this;
+}, true);
+ if (element.hasAttribute('bgimage')){
+    element.innerHTML = element.getAttribute('bgimage');
+    }
+ if (element.hasAttribute('customrange')){
+     var r = document.getElementById(element.getAttribute('customrange')).getBoundingClientRect();
+    element.style.top = r.top;
+    element.style.left = r.left;
+    }
+}
+
+function initrange( element)
+{
+ if (element.hasAttribute('bgimage')){
+    element.innerHTML = element.getAttribute('bgimage');
+    }
+}
+ 
 </script>
 <svg width="440" height="260" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
@@ -380,9 +502,9 @@ fill:#0052E1;
 </svg>
 
 <br>
-<div style='margin-left: 0.3cm;' >
-<table valign='top' >
-<tr><td width='auto' align='middle'>
+<div style='margin-left: 0cm;' >
+<table style='border-spacing: 5px'>
+<tr ><td width='auto' align='middle'>
 <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300">
 <defs>
   <filter id="blurMe"><feGaussianBlur in="SourceGraphic" stdDeviation="6" /></filter>
@@ -394,9 +516,24 @@ fill:#0052E1;
 <rect x="24" y="130" width="110" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
 <rect x="66" y="148" width="50" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
 <rect x="8" y="172" width="90" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
-</svg></svg></td>
-<td width='auto' ><div class='line'><input type='range' width='300px' /></div><div class="lineslidertext">Feedrate </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
-<tr><td align='middle'>
+</svg></td>
+<td width='auto' >
+   <div id='rangefeedrate'  min="25" max="300" class='sliderrange' onclick ="rangeclicked(event,this);"  customthumb='thumbfeedrate'>
+    <svg width='322' height='20' viewbox='0 0 322 20'>
+        <defs>
+            <pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
+                <rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
+            </pattern>
+        </defs>
+    <rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
+    <text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Feedrate</text>
+    </svg>
+    </div>
+<div id='thumbfeedrate' class='sliderthumb' render='feedraterender' customrange='rangefeedrate'>
+    <svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z'  /></svg>
+</div>    
+</td><td width='auto'><input id='feedraterender' type="number" min='25' max='300' step='1' style="width: 4em;"></td></tr>
+<tr style='margin-top: 50px'><td align='middle'>
 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect x='2' y='2' width='3' height='10' />
 <rect x='8' y='4' width='3' height='8' />
@@ -404,7 +541,21 @@ fill:#0052E1;
 <rect x='20' y='8' width='3' height='4' />
 <path d="M2,17 L18,17 L18,14 L23,18.5 L18,23 L18,20 L2,20 z" />
 </svg>
-</td><td width='auto' ><div class='line'><input type='range' /></div> <div class="lineslidertext">Flowrate </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
+</td><td width='auto' >
+ <div id='rangeflowrate'  min="50" max="150" class='sliderrange' onclick ="rangeclicked(event,this);"  customthumb='thumbflowrate'>
+    <svg width='322' height='20' viewbox='0 0 322 20'>
+        <defs>
+            <pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
+                <rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
+            </pattern>
+        </defs>
+    <rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
+    <text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Flowrate</text>
+    </svg>
+    </div>
+<div id='thumbflowrate' class='sliderthumb' render='flowraterender' customrange='rangeflowrate' ><svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z'  /></div>    
+
+</td><td width='auto'><input id='flowraterender' min='50' max='150' step='1' type='number' style='width: 4em;'></td></tr>
 <tr><td align='middle'>
 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g id='fan' onmouseup="fan_on = fan_on===0?1:0; show_hide(red_fan,fan_on);" >
@@ -413,7 +564,22 @@ fill:#0052E1;
 <polygon id='red_fan' points="19,0 21,2 2,21 0,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
 </g>
 </svg>
-</td><td width='300px'><div class='line'><input type='range' width='300px' /></div><div class="lineslidertext">Fan </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
+</td><td>
+<div id='rangefanspeed'  min="0" max="100" class='sliderrange' onclick ="rangeclicked(event,this);"  customthumb='thumbfanspeed'>
+    <svg width='322' height='20' viewbox='0 0 322 20'>
+        <defs>
+            <pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
+                <rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
+            </pattern>
+        </defs>
+    <rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
+    <text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Fan</text>
+    </svg>
+    </div>
+<div id='thumbfanspeed' class='sliderthumb' render='fanspeedrender' customrange='rangefanspeed' >
+    <svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z'  /></svg>
+</div>    
+</td><td width='auto'><input type="number" id='fanspeedrender' min='0' max='100' step='1' style="width: 4em;"></td></tr>
 <tr><td>
 <svg width="29" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g id='bed' onmouseup="bed_on = bed_on===0?1:0; show_hide(red_bed,bed_on);" >
@@ -426,7 +592,33 @@ fill:#0052E1;
 <polygon id='red_bed' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
 </g>
 </svg>
-</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Bed temperature </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
+</td><td >
+<div id='rangebed'  min='0' max='150' class='sliderrange' onclick ='rangeclicked(event,this);'  customthumb='thumbbed'>
+<svg width='322' height='22' viewbox='0 0 322 22'>
+<defs>
+<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
+</defs>
+<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
+<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
+<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
+<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
+<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1'  stroke='#C3BDB5' />
+<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Bed Temperature</text>
+<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>60.43&deg;C</text>
+<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
+</svg>
+</div>
+<div id='thumbbed' class='sliderthumb' render='bedrender' customrange='rangebed' >
+    <svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z'  /></svg>
+</div> 
+</td><td width='auto'><input type="number" id='bedrender' max='150' min='130' step='1' style="width: 4em;"></td></tr>
 <tr><td>
 <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g id='Ext1' onmouseup="ext1_on = ext1_on===0?1:0; show_hide(red_ext1,ext1_on);" >
@@ -436,7 +628,32 @@ fill:#0052E1;
 <polygon id='red_ext1' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
 </g>
 </svg>
-</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Extruder 1 </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
+</td><td >
+<div id='rangeext1'  min="0" max="300" class='sliderrange' onclick ="rangeclicked(event,this);"  customthumb='thumbext1'>
+<svg width='322' height='22' viewbox='0 0 322 22'>
+<defs>
+<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
+</defs>
+<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
+<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
+<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
+<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
+<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1'  stroke='#C3BDB5' />
+<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Extruder 1</text>
+<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>180.03&deg;C</text>
+<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
+</svg>
+</div>
+<div id='thumbext1' class='sliderthumb' render='ext1render' customrange='rangeext1' >
+    <svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z'  /></svg></div> 
+</td><td width='auto'><input type="number" id='ext1render' min='0' max='300' step='1' style="width: 4em;"></td></tr>
 <tr><td>
 <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <g id='Ext2' onmouseup="ext2_on = ext2_on===0?1:0; show_hide(red_ext2,ext2_on);" >
@@ -446,8 +663,48 @@ fill:#0052E1;
 <polygon id='red_ext2' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
 </g>
 </svg>
-</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Extuder 2 </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
+</td>
+<td >
+<div id='rangeext2'  min="0" max="300" class='sliderrange' onclick ="rangeclicked(event,this);"  customthumb='thumbext2'>
+<svg width='322' height='22' viewbox='0 0 322 22'>
+<defs>
+<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
+<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
+<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
+</defs>
+<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
+<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
+<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
+<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
+<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1'  stroke='#C3BDB5' />
+<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Extruder 2</text>
+<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>180.03&deg;C</text>
+<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
+</svg>
+</div>
+<div id='thumbext2' class='sliderthumb' render='ext2render' customrange='rangeext2' >
+   <svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z'  /></svg> </div> 
+</td><td width='auto'><input type="number" id='ext2render' min='0' max='300' step='1' style="width: 4em;"></td></tr>
 </table>
 </div>
+<script>
+initrange( rangefeedrate);
+initthumb( thumbfeedrate);
+initrange( rangeflowrate);
+initthumb( thumbflowrate);
+initrange( rangefanspeed);
+initthumb( thumbfanspeed);
+initrange( rangebed);
+initthumb( thumbbed);
+initrange( rangeext1);
+initthumb( thumbext1);
+initrange( rangeext2);
+initthumb(thumbext2);
+</script>
 </BODY>
 </HTML>
