mirror of
https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git
synced 2025-08-05 12:10:39 +08:00
151 lines
4.9 KiB
HTML
151 lines
4.9 KiB
HTML
<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.sliderthumb{
|
|
position : absolute;
|
|
cursor : pointer;
|
|
}
|
|
|
|
.sliderrange{
|
|
cursor : pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
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) ;
|
|
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 = 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>
|
|
<table border=1>
|
|
<tr>
|
|
<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="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>
|
|
<input type='button' onclick='movethumbat(thumb1, inputtest.value)' value='push me' > <input id='inputtest' type='number' />
|
|
<script>
|
|
|
|
initrange( range1);
|
|
initrange( range2);
|
|
initthumb( thumb1);
|
|
initthumb( thumb2);
|
|
</script>
|
|
</body>
|
|
</html>
|