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