simplest way I can think of is to use an input range.
Use some css in the head html to style it for Safari/Chrome and FF.
<style>
input[type=range] {
-webkit-appearance: none!important;
width: 100%!important;
border-radius: 14px!important;
height: 24px!important;
border: 1px solid #bdc3c7!important;
background-color: blue!important;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none!important;
background-color: #ecf0f1!important;
border: 1px solid #bdc3c7!important;
width: 20px!important;
height: 20px!important;
border-radius: 10px!important;
cursor: pointer!important;
}
.firefox input[type=range]::-moz-range-track {
border-radius: 14px!important;
height: 5px!important;
border: 1px solid #bdc3c7!important;
background-color: #fff!important;
}
.firefox input[type=range]::-moz-range-thumb {
background: #ecf0f1!important;
border: 1px solid #bdc3c7!important;
width: 20px!important;
height: 20px!important;
border-radius: 10px!important;
cursor: pointer!important;
}
}
</style>
Put the range input in a Rect with an oninput call to a hype function.
<input type="range" min="0" max="2000" value="0" id="fader" step="10" oninput="window.myhypedocument.functions().outputUpdate(window.myhypedocument,this,value)">
You will need to add
<script type="text/javascript"> function myCallback(hypeDocument, element, event){
window.myhypedocument = hypeDocument; }
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>
to the head html.
And the hype function
document.querySelector('#start').innerHTML = event + " K";
document.querySelector('#current').value = (Number(event) *10 ) + " $";
add two more rects one with it’s innerHTML as the label
<label id="start" for="fader">0 K</label>
And the other with
<output for="fader" id="current">100 $</output>
That should be it
InputRagne_mh1.hype.zip (16.0 KB)