Hi everyone, I’m looking for solution how to create (double) range slider. It should independently (different ratios) change numbers in two text boxes when dragging an element (ellipse). I’m attaching a picture to explain visually, what I mean.
Any suggestions highly appreciated. Thanks!
BTW: There is nice script for that (http://rangeslider.js.org), but I can’t figure out out how to implement only the needed parts into hype document.
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)
Wow, that was fast. Works like charm - thank you!
Can I ask: would there be a way around html head css / javascript injection?
(The output of hype document will be div living in html page which I won’t have full/permanent control over).
Thanks again!
Yes.
Place all the css in the same innerHTML as the input. And change the call to the hype function to call the hype document by document name
<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>
<input type="range" min="0" max="2000" value="0" id="fader" step="10" oninput="HYPE.documents['index'].functions().outputUpdate(HYPE.documents['index'],this,value)">
You need to change the index in HYPE.documents[‘index’] to the exported document name in the hype_generated_script.js
To get this you will need to look in the hype_generated_script.js at the top.
So mine would be HYPE.documents[‘InputRagne_mh2’]
But I use index while previewing in hype.
InputRagne_mh2.hype.zip (16.0 KB)
Coool - works perfectly! Thanks so much! Lukas
One more question… : )
Would there be any way how to change the ratio by clicking an object/button? (to have three of them actually)
I guess there would have to be a variable that would change on click, but I can’t make it work (surprisingly…)
document.querySelector(’#current’).value = (Number(event) *12 ) + " $";
Thanks! PS: Don’t worry if you’d have no time - this would be just an cool addition : )
Add two buttons to the scene.
(x10) and (x12)
give each button an id respectively
ten
twelve
Now give the range input in the innerHTML an id. call it ‘range’
In the outputUpdate function.
Add this as the very first line.
if (! window.amount){window.amount =10};
(update *)
And change the last line
document.querySelector('#current').value = (Number(event) *12 ) + " $";
in outputUpdate
to
document.querySelector('#current').value = (Number(event) * Number(window.amount) ) + " $";
Now create a new Hype function timesAmount with this code
var amounts = {ten:10,twelve:12}
window.amount = amounts[element.id];
var value = document.querySelector('#range').value
hypeDocument.functions().outputUpdate(hypeDocument,element,value);
Then asking the buttons mouse clicks to the timesAmount function.
The new function will set the new amount to use and also call the first function to make an update.
Thanks Mark! For some reason I can’t make it work. I understand the way of picking of values and sending them back to outputUpdate, but for some reason clicks doesn’t see / set them (undefined / NaN). I suppose I’m not setting correctly range input in the innerHTML… I’m attaching a file if you could please have a look.
Thanks!
InputRagne_mh2.zip (202.8 KB)
Sorry partly my fault, I forgot to say change the last line
document.querySelector('#current').value = (Number(event) *12 ) + ",- Kč";
in outputUpdate
to
document.querySelector('#current').value = (Number(event) * Number(window.amount) ) + ",- Kč";
Also partly yours, you did not give the innHTML range input an id.
`[quote=“MarkHunte, post:7, topic:7773”]
Now give the range input in the innerHTML an id. call it ‘range’
[/quote]
As shown here.
<font color="#dadada"><input id="range" type="range" min="0" max="200" value="0" step="1" oninput="HYPE.documents['index'].functions().outputUpdate(HYPE.documents['index'],this,value)"></font>
I probably could have been more clearer there. 
I have also included a selected button bit of code with selected button marked.
Both buttons have the same class added that is used for this
InputRagne_mhLT_3.hype.zip (206.3 KB)
Amazing, works flawlessly now! (I even had once the innerHtml id correctly be but deleted that later.) With some icons and little animation it should serve as little travel expenses demonstration) pretty well. : ) Thanks a lot!
Looks good.
Hi Mark, hello evyrobody. It turned out that range slider unfortunately doesn’t work in internet explorer, which is required - grrr : / Css styling isn’t an issue, but the numbers doesn’t update on range slider drag. Any suggestions appreciated!
I don’t have IE, but note a range input may not work with IE 9 and below.
Thanks Mark. I’m trying it out on IE 11 + MS Edge. Thy styling of the range works fine, the slider itself see the values but they aren’t red by text fields : / Sample file attached, any help appreciated. Thanks.InputRagne_4.zip (227.7 KB)