test.html

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

    <!-- Latest compiled and minified CSS -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> -->

    <!-- Optional theme -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> -->

    <!-- Latest compiled and minified JavaScript -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->

     <div class="card bg-dark text-white text-center mb-4">
                    <div class="card-body"></div></div>
    <form>
        <label>Amplitude</label>
        <input id="sldAmplitude" type="range" min="0" max="20">
        <input type="number" id="iptAmplitude" style="width: 2.5em" value="20">
        <label>cm</label>
    </form>
    <form>
        <label id="lblAmplitude">10 cm</label>
    </form>

<!-- end snippet -->