Slider Example

Slider Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- Slider Example 
Source code file: index.htm -->

<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
              http-equiv="Content-Type">
        <title>Slider Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Slider Example</h1>

        <!-- Submit form with method POST. -->
        <form id="form1"
              action="http://ectweb.cs.depaul.edu/sjost/receipt.php"
              method="POST">
            <label for="amount1">
                Enter Numeric Value for temperature:
            </label><br>
            <input type="range" id="temp" 
                   name="temperature" min="32" 
                   max="212" value="32"><br>
            32
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" id="display" value="32">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;
            212<br><br>

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>

CSS Sheet -- styles.css

/* Styles for Slider Example 
   Source code file: styles.css */
body { background-color: #E0E0FF; 
       color: #000080; 
       font-family: Tahoma, Verdana, sans-serif; }
h1       { color: #800000; }
#temp    { width: 200px; }
#display { width: 30px; }

JavaScript Script -- script.js

 // Slider Example
// Source code file: script.js

// When slider thumb is moved, show value
// in the display textfield.
function showSliderValue( ) {
    var slider = document.querySelector("#temp");
    var textField = document.querySelector("#display");
    textField.value = slider.value;
}

function init( ) {
    var slider = document.querySelector("#temp");
    slider.addEventListener("input", showSliderValue)
}

window.addEventListener("load", init);