GitHub-Proxy/ESP3D
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git synced 2025-08-14 15:15:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add min max boundaries for range

Browse Source 
add function to set cursor position based on value
This commit is contained in:
luc lebosse 2016-07-22 11:00:44 +02:00
parent 2dea6fe379
commit bbd16f6d2f
1 changed files with 68 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
UI/mousediv.html
View File

@ -5,6 +5,10 @@
<style> <style>
.sliderthumb{ .sliderthumb{
position : absolute; position : absolute;
cursor : pointer;
}
.sliderrange{
cursor : pointer; cursor : pointer;
} }
</style> </style>
@ -17,25 +21,67 @@ document.addEventListener('mouseup', function() {
isDown = false; isDown = false;
}, true); }, true);
//position is based on screen position value
function movethumb(pos) function movethumb(pos)
{ {
var p = pos + offset; var p = pos + offset;
var rangewidth=0; var minpos =0;
var minpos =0; var maxpos = 0;
var maxpos = 0; var minvalue =0;
if (active_control.hasAttribute('customrange')){ var maxvalue = 100;
var r = document.getElementById(active_control.getAttribute('customrange')).getBoundingClientRect(); var value=0;
rangewidth = r.right - r.left; var rangeelement =null;
minpos = r.left; if (active_control.hasAttribute('customrange')){
maxpos = r.right; rangeelement = document.getElementById(active_control.getAttribute('customrange'));
} var r = rangeelement.getBoundingClientRect();
var r2 = active_control.getBoundingClientRect(); minpos = r.left;
if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left); maxpos = r.right;
if ( p <minpos) p =minpos ; if (rangeelement.hasAttribute('min')){
active_control.style.left = p+ 'px'; minvalue = rangeelement.getAttribute('min')
if (active_control.hasAttribute('render')){ }
document.getElementById(active_control.getAttribute('render')).value =Math.round(p-minpos) ; if (rangeelement.hasAttribute('max')){
} maxvalue = 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) ;
active_control.style.cursor='pointer';
}
}
//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 = rangeelement.getAttribute('min')
}
if (rangeelement.hasAttribute('max')){
maxvalue = 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';
if (thumbcursor.hasAttribute('render')){
document.getElementById(thumbcursor.getAttribute('render')).value =value;
}
} }
document.addEventListener('mousemove', function(event) { document.addEventListener('mousemove', function(event) {
@ -79,17 +125,20 @@ function initrange( element)
} }
} }
</script> </script>
<table border=1> <table border=1>
<tr> <tr>
<td><div id='range1' 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="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>
<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> <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> </td><td><input id='v1' type='number' value='0'/></td></tr>
<tr> <tr>
<td><div id='range2' 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="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>
<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> <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> </td><td><input id='v2' type='number' value='0'/></td></tr>
</table> </table>
<input type='button' onclick='movethumbat(thumb1, inputtest.value)' value='push me' > <input id='inputtest' type='number' />
<script> <script>
initrange( range1); initrange( range1);