fix bug for cursor position if min value is not 0

This commit is contained in:
luc lebosse 2016-07-22 15:15:16 +02:00
parent bbd16f6d2f
commit 9ab4bfdc5e

View File

@ -37,10 +37,10 @@ function movethumb(pos)
minpos = r.left;
maxpos = r.right;
if (rangeelement.hasAttribute('min')){
minvalue = rangeelement.getAttribute('min')
minvalue = parseFloat(rangeelement.getAttribute('min'))
}
if (rangeelement.hasAttribute('max')){
maxvalue = rangeelement.getAttribute('max')
maxvalue = parseFloat(rangeelement.getAttribute('max'))
}
}
var r2 = active_control.getBoundingClientRect();
@ -48,8 +48,8 @@ function movethumb(pos)
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) ;
value = (((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left)))
document.getElementById(active_control.getAttribute('render')).value = Math.round(value + minvalue) ;
active_control.style.cursor='pointer';
}
}
@ -67,18 +67,18 @@ function movethumbat(thumbcursor, value){
minpos = r.left;
maxpos = r.right;
if (rangeelement.hasAttribute('min')){
minvalue = rangeelement.getAttribute('min')
minvalue = parseFloat(rangeelement.getAttribute('min'))
}
if (rangeelement.hasAttribute('max')){
maxvalue = rangeelement.getAttribute('max')
maxvalue = parseFloat(rangeelement.getAttribute('max'))
}
}
if (value > maxvalue) value = maxvalue;
if (value < minvalue) value = minvalue;
var r2 = thumbcursor.getBoundingClientRect();
var pos=0;
pos = ((((maxpos-minpos) - (r2.right-r2.left)) / (maxvalue-minvalue)) * value) + minpos;
thumbcursor.style.left = pos+ 'px';
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;
}
@ -130,11 +130,11 @@ function initrange( element)
</script>
<table border=1>
<tr>
<td><div id='range1' min="0" max="270" class='sliderrange' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
<td><div id='range1' min="-10" max="270" class='sliderrange' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
<div id='thumb1' class='sliderthumb' render='v1' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range1'></div>
</td><td><input id='v1' type='number' value='0'/></td></tr>
<tr>
<td><div id='range2' min="0" max="270" onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
<td><div id='range2' min="50" max="300" onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
<div id='thumb2' class='sliderthumb' render='v2' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range2'></div>
</td><td><input id='v2' type='number' value='0'/></td></tr>
</table>