Jump to content
Please Use CODE Tags

How do I display a value in HTML

mattonfire
By mattonfire
in Programming
 Share
Posted

Here is the code that displays the slider, I want to be able to display the value, the default is 50. How do I display that below? 


<body>
        <form>
                <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">                         
        </form>
</body>                

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Here's one way to do it: 

<!DOCTYPE html>
<html>
    <head>
        <title>Slider Test</title>
    </head>
    <body>
        <form>
            <input type="range" name="rangeInput" min="0" max="100" value="50" onchange="updateTextInput(this.value);">
            <input type="text" id="textInput" value="">
        </form>
        <h3 id="textTitle"></h3>
    </body>
    <script type="text/javascript">
    function updateTextInput(val) {
        document.getElementById('textInput').value=val;
        document.getElementById("textTitle").innerHTML = val;
    }
    window.onload = updateTextInput(50);
    </script>
</html>

It uses javascript in order to update the HTML with the value of the slider. The function "updateTextInput" will change the value of the text input to the passed in value "val". It gets the value "val" when the slider is moved, which is caused by the additional attribute "onchange."

 

Source

 

The window.onload near the end of the <script> tag is to set the text value when the page loads.

 

Source

CPU: i7-4790K --- HEATSINK: NZXT Kraken X61 --- MOBO: Asus Z97-A --- GPU: GTX 970 Strix --- RAM: 16GB ADATA XPG --- SSD: 512GB MX100 | 256GB BX200 HDD: 1TB WD Black --- PSU: EVGA SuperNova G2 --- CASE: NZXT H440 --- DISPLAY: 3 x Dell U2414H --- KEYBOARD: Pok3r (Clears) --- MOUSE: Logitech G Pro --- OS: Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
9 minutes ago, spenser_l said:

-snip-

 

Great! Wait, the variable is currently "val"?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
4 minutes ago, mattonfire said:

Great! Wait, the variable is currently "val"?

Yes. 

onchange="updateTextInput(this.value);">

So here, this says: if the slider value changes, call the function "updateTextInput" and pass in my current slider value, hence "this.value," where "this" is the slider. 

function updateTextInput(val) {}

This function has one parameter, arbitrarily named "val". You could name this anything you want, such as "sliderValue" if that is more descriptive for you, so long as you keep it consistent throughout the function.

CPU: i7-4790K --- HEATSINK: NZXT Kraken X61 --- MOBO: Asus Z97-A --- GPU: GTX 970 Strix --- RAM: 16GB ADATA XPG --- SSD: 512GB MX100 | 256GB BX200 HDD: 1TB WD Black --- PSU: EVGA SuperNova G2 --- CASE: NZXT H440 --- DISPLAY: 3 x Dell U2414H --- KEYBOARD: Pok3r (Clears) --- MOUSE: Logitech G Pro --- OS: Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

A little above my HTML level but I was on the right track about it needing to use Java, originally I was thinking about a download ongoing process bar which can use PHP.

Link:

http://www.jqueryrain.com/demo/jquery-range-slider/

 

http://www.w3schools.in/php/file-upload/

Those who deny freedom to others deserve it not for themselves (Abraham Lincoln,1808-1865; 16th US president).

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, spenser_l said:

Yes. 


onchange="updateTextInput(this.value);">

So here, this says: if the slider value changes, call the function "updateTextInput" and pass in my current slider value, hence "this.value," where "this" is the slider. 


function updateTextInput(val) {}

This function has one parameter, arbitrarily named "val". You could name this anything you want, such as "sliderValue" if that is more descriptive for you, so long as you keep it consistent throughout the function.

I'm sorry this is utterly comfusing for me, do you have a voice com application like skype or something?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Ended up specifically looking at the middle slider in this Java Script as it has the elements you suggested

http://www.jqueryrain.com/?yLgqxp0E

 

Also found this on stackoverflow.com...your answer a post by Andrew Willems

Those who deny freedom to others deserve it not for themselves (Abraham Lincoln,1808-1865; 16th US president).

Link to comment
Share on other sites
Link to post
Share on other sites
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×