Snippet for responsive slider update

Place code snippets and demo code here
Post Reply
User avatar
Electroguard
Posts: 179
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 40 times
Been thanked: 102 times

Snippet for responsive slider update

Post by Electroguard »

(from CiccioCB)
Hi all,
Seeing a question about how to have a responsive slider / textbox interaction, I created a little snipped that show how this can be done relying more on the browser functionalities.
This snippet is a good example on how it is possible to integrate html / javascript with annex.
The instructions are directly inside the code below.

Code: [Local Link Removed for Guests]

'simple snippet showing how manage a slider with
'its value shown in a textbox sending the updated value
'clicking on an "Update' button

'The variable is MyVar and is defined in the basic and also in the html code
'if 'value="20" is removed from the HTML, it will be automatically filled issuing the refresh command

'run the program and look for the variable value in the console.
'move the slider and see the effect in the textbox.
'clicking on the Update button will update the variable.
'Then, in the immediate window, type myVar = 25 and then type refresh
'both the slider and the textbox will be updated 
cls
myVar = 20

a$ =||
a$ = a$ + |<input type="range" data-var="myVar" oninput="_$('myTextBox').value = this.value;" value="20" min="16" max="30" step="1">|
a$ = a$ + |<br>|
a$ = a$ + |<input type="text" data-var="myVar" id="myTextBox" value="20" style="width:140">|
a$ = a$ + |<br>|
a$ = a$ + |<button onclick="connection.send('cmd:immediatx' + 'myVar=' + _$('myTextBox').value);">Update</button>|
html a$
refresh

for z=1 to 100000
print myVar
next z
Post Reply